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>

Ti servono altre spiegazioni?

Se le spiegazioni riportate in questa pagina non rispondono a tutte le tue domande, non esitare a contattare altri utenti AMP per discutere il tuo caso d'uso specifico.

Vai a Stack Overflow

Ci sono funzioni non descritte?

Il progetto AMP invita tutti a partecipare e dare il proprio contributo! Ci auguriamo che tu possa partecipare regolarmente alla nostra community open source, ma saremo anche lieti di ricevere eventuali contributi una-tantum sulle questioni che ti interessano.

Modifica esempio in GitHub

Written by @elisameyer