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 =
</ script >
|
Example:
<!DOCTYPE html> < html amp>
< head >
< title >GeeksForGeeks | amp-bind-macro</ title >
< meta charset = "utf-8" />
< script async
</ script >
< link rel = "canonical" href =
< 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" </ 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 >GeeksForGeeks</ 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:'
'replaceSpace(argumentString)">
Your sanitized link will display
here. You can copy and paste into
search bar to test.
</ p >
</ div >
</ body >
</ html >
|