Introducción: a veces es posible que desee sanear su entrada a la URL de búsqueda de Google, esto se puede lograr con la ayuda de amp-bind-macro. Se puede usar para crear una URL desinfectada dinámicamente. Se puede lograr una URL desinfectada simplemente convirtiendo la entrada a minúsculas y reemplazando los espacios con ‘%20’ .
Configuración: para usar amp-bind-macro en nuestra página AMP, debemos importar el script amp-bind en el encabezado del documento.
<script async custom-element="amp-bind" src= "https://cdn.ampproject.org/v0/amp-bind-0.1.js"> </script>
Ejemplo:
<!DOCTYPE html>
<html amp>
<head>
<title>GeeksForGeeks | 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>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:'
' 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>
Producción:
Publicación traducida automáticamente
Artículo escrito por aditya_taparia y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA