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 撰寫