En este artículo, aprenderemos a encontrar todos los enlaces con un atributo hreflang . El hreflang es un atributo que le dice a los motores de búsqueda la relación entre páginas en diferentes idiomas en tu sitio web.
Puede utilizar este atributo de las tres formas siguientes.
- Como enlace en el encabezado HTML de la página (<head>).
- En el encabezado HTTP (ejemplos de PDF)
- En el mapa del sitio XML
Puede encontrar todos los enlaces con un atributo hreflang en su página utilizando el selector de atributosContainsPrefix .
selector de atributoContainsPrefix : este selector se utiliza para seleccionar elementos que tienen el atributo especificado con un valor igual a una string dada o que comienza con esa string.
Sintaxis:
jQuery( "[attribute|='value']" ) $( "a[hreflang|='en']" )
Ejemplo 1: En los siguientes ejemplos, primero encontramos el hreflang y luego lo resaltamos usando las propiedades CSS. El atributo hreflang con un valor ‘en’ se resalta con el borde punteado rojo.
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
a {
display: inline-block;
}
</style>
<script src=
"https://code.jquery.com/jquery-3.5.0.js">
</script>
</head>
<body>
<h2 style="color:green">GeeksforGeeks</h2>
<a href="example.html" hreflang="en">GFG</a>
<a href="example.html" hreflang="en-UK">
Computer Science
</a>
<a href="example.html" hreflang="english">
will not be outlined
</a>
<script>
$( "a[hreflang|='en']" )
.css( "border", "3px dotted red" );
</script>
</body>
</html>
Producción:
href lang = es
Ejemplo 2:
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
a {
display: inline-block;
}
</style>
<script src=
"https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<h2 style="color:green">GeeksforGeeks</h2>
<a href="example.html" hreflang="en">Database</a>
<a href="example.html" hreflang="en-UK">
Computer Networks
</a>
<a href="example.html" hreflang="english">
will not be outlined
</a>
<script>
$( "a[hreflang|='en']" )
.css( "border", "3px solid green" );
</script>
</body>
</html>
Producción:
hreflag=es imagen2