Skip to content
Related Articles

Related Articles

Improve Article

How to find all links with an hreflang attribute using jQuery ?

  • Difficulty Level : Expert
  • Last Updated : 31 Mar, 2021

In this article, we will learn to find all links with a hreflang attribute. The hreflang is an attribute that tells search engines the relationship between pages in different languages on your website.

You can use this attribute in the following three ways.

  • As a link in the HTML head of the page(<head>).
  • In the HTTP header (example PDFs)
  • On the XML sitemap

You can find all links with an hreflang attribute on your page using the attributeContainsPrefix selector.

attributeContainsPrefix selector: This selector is used to select elements that have the specified attribute with a value either equal to a given string or starting with that string.

Syntax:



jQuery( "[attribute|='value']" )

$( "a[hreflang|='en']" ) 

Example 1: In the following examples, we first find the hreflang and then highlight it using CSS properties. The hreflang attribute with a value ‘en’ gets highlighted with the red dotted border.

HTML




<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <style>
  a {
    display: inline-block;
  }
  </style>
  <script src=
  </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>

Output:

href lang = en

Example 2: 

HTML




<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <style>
  a {
    display: inline-block;
  }
  </style>
  <script src=
</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>

Output:

hreflag=en image2




My Personal Notes arrow_drop_up
Recommended Articles
Page :