amp-bind-macro

简介

此示例演示如何使用 amp-bind-macro 调用来清理 URL 的用户输入。

设置

导入 amp-bind 组件以使用 amp-bind-macro。

<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>

实现

在 amp-bind-macro 中定义的 replaceSpace 表达式将用户输入中的空格替换为 s/ /%20/

并将所有字母设置为小写，以匹配 Google 搜索的 URL 格式

输入一些您想要搜索的带空格的内容

您清理后的链接将显示在此处。您可以复制并粘贴到搜索栏进行测试。

<amp-bind-macro id="replaceSpace" arguments="str" expression="str.toLowerCase().split(' ').join('%20')">
</amp-bind-macro>

<p>
  Type in something you want to search with spaces
</p>
<input type="text" placeholder="Search Query" on="input-throttled:AMP.setState({ argumentString: event.value })">
  <p [text]="'You have create a sanitized link: https://www.google.com/search?q=' + replaceSpace(argumentString)">
    Your sanitized link will display here. You can copy and paste into search bar to test.
  </p>

需要进一步解释？

如果此页面上的解释没有涵盖您的所有问题，请随时与其他 AMP 用户联系，讨论您的具体用例。

转到 Stack Overflow

未解释的功能？

AMP 项目强烈鼓励您的参与和贡献！我们希望您能成为我们开源社区的长期参与者，但我们也欢迎您针对自己特别关注的问题做出一次性贡献。

在 GitHub 上编辑示例

由 @elisameyer 撰写