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 搜尋的網址格式

輸入您想搜尋的內容，可包含空格

您清理後的連結將顯示於此。您可以複製並貼到搜尋列進行測試。

<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