How to sanitize user input to URL with an amp-bind-macro call ?
Introduction: Sometimes you may want to sanities your input to the search URL of the Google, this can be achieved with the help of amp-bind-macro. It can be used to create a sanitized URL dynamically. A sanitized URL can be achieved by simply converting the input to lowercase and replacing the spaces with ‘%20’.
Setup: To use amp-bind-macro in our AMP page we have to import amp-bind script in the head of the document.
< script async custom-element = "amp-bind" src = "https://cdn.ampproject.org/v0/amp-bind-0.1.js" > </ script > |
Example:
<!DOCTYPE html> < html amp> < head > < title >w3wiki | amp-bind-macro</ title > < meta charset = "utf-8" /> < script async src = "https://cdn.ampproject.org/v0.js" > </ script > < link rel = "canonical" href = "https://amp.dev/documentation/examples/components/amp-bind-macro/index.html" /> < meta name = "viewport" content=" width = device -width, minimum-scale = 1 , initial-scale = 1 " /> <!-- 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 > < style amp-boilerplate> body { -webkit-animation: -amp-start 8s steps(1, end) 0s 1 normal both; -moz-animation: -amp-start 8s steps(1, end) 0s 1 normal both; -ms-animation: -amp-start 8s steps(1, end) 0s 1 normal both; animation: -amp-start 8s steps(1, end) 0s 1 normal both; } @-webkit-keyframes -amp-start { from { visibility: hidden; } to { visibility: visible; } } @-moz-keyframes -amp-start { from { visibility: hidden; } to { visibility: visible; } } @-ms-keyframes -amp-start { from { visibility: hidden; } to { visibility: visible; } } @-o-keyframes -amp-start { from { visibility: hidden; } to { visibility: visible; } } @keyframes -amp-start { from { visibility: hidden; } to { visibility: visible; } } </ style > < noscript > < style amp-boilerplate> body { -webkit-animation: none; -moz-animation: none; -ms-animation: none; animation: none; } </ style > </ noscript > < style amp-custom> h1 { color: forestgreen; } </ style > </ head > < body > < center > < h1 >w3wiki</ h1 > </ center > <!-- 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 --> < div style = "left: 0.5em; position: absolute;" > < 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 ="'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 > </ div > </ body > </ html > |