Do you build things with AMP? Fill out the new AMP Developer Survey!
AMP
  • email

amp-bind-macro

Introduction

This example shows how you can sanitize user input for a URL with an amp-bind-macro call.

Setup

Import the amp-bind component to use amp-bind-macro.

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

Implementation

the replaceSpace expression defined in amp-bind-macro replaces spaces in user input with s/ /%20/

and sets all letters to lowercase to match url format for Google search

Type in something you want to search with spaces

Your sanitized link will display here. You can copy and paste into search bar to test.

<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 上编辑实例