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>

Perlu penjelasan lebih lanjut?

Jika penjelasan pada halaman ini tidak menjawab semua pertanyaan Anda, silakan hubungi pengguna AMP lainnya untuk mendiskusikan contoh penggunaan Anda yang spesifik.

Kunjungi Stack Overflow

Fitur yang tidak dijelaskan?

Proyek AMP sangat menganjurkan partisipasi dan kontribusi Anda! Kami berharap Anda akan terus ambil bagian dalam komunitas sumber terbuka kami, tetapi kami juga menerima kontribusi satu kali untuk topik tertentu yang Anda minati.

Edit sampel di GitHub

Written by @elisameyer