As a web developer or just a curious mind navigating the web you might find yourself in a situation where you need to highlight link(s) on a specific webpage or HTML document but the only thing you are armed with is just a word from the url.

Lets take an hypothetical situation that you are on WebsiteA and you are certain that WebsiteA contains link(s) to another specific website you will like to navigate to, lets call it WebsiteB. Hunting down the specific link(s) might be time consuming if WebsiteA contains lots of links. Using JavaScript we can highlight these links even if the only thing we remember from the url is just a single word.

When you are on WebsiteA, open your Developer Tools (Ctrl + Shift + I in Firefox and Chrome), I am currently viewing the MDN website with FireFox.

If there are any output in the console, click on the trash icon located at the top left corner to get rid of them. Lets make a list of what we want to do in order to highlight any link:

We get all the links on the page
We loop through the result
- if any link contain our keyword
- we highlight it
  1. changing the font weight
  2. change the background color
  3. apply a color to the link to make it readable on the backgroubnd color

In computer science, this is known as an algorithm which can be defined as:

In mathematics and computer science, an algorithm is a sequence of instructions, typically to solve a class of problems or perform a computation. - Wikipedia

Lets turn our algorithm to code.

In order to get all the links on a page, we can use JavaScript documents.getElementsByTagName() method and the HTML tag we will pass to it will be the anchor tag a which is used to create links in HTML. The resulting anchor tags is an HTMLCollection

Next we loop through the result

// loop through it, since its an  HTMLCollection
for (let i = 0; i < link.length; i++) {
}

HTML links have the href attribute which contains the url of the resource we a linking to, we get this value in JavaScript by selecting an element from the HTMLCollection with the href method as depicted in the image below:

and to check if any of its element contain our keyword, we use the .includes() method

which returns true if the keyword is found in the string

and false otherwise

If it returns true, that means our keyword was found and we can perform the necessary action on it, in this case we highlight the link by changing its font-weight and background-color just to make it stand out

// loop through it, since its an  HTMLCollection
for (let i = 0; i < link.length; i++) {

  // if link includes our keyword, in this case the word
  // 'hacks'
  if (links[i].href.includes('hacks')) {

     // change the link background color
     links[i].style.backgroundColor = "#1560bd";

     // change the text color
     links[i].style.color = "#ffffff";

     // change the font weight
     links[i].style.fontWeight = "bold";
   }

}

And code from step1 and step 2 combined:

// get all anchor tags
let link = document.getElementsByTagName('a');

// loop through it, since its an  HTMLCollection
for (let i = 0; i < link.length; i++) {

  // if link includes our keyword, in this case the word
  // 'hacks'
  if (link[i].href.includes('hacks')) {

     // change the link background color
     link[i].style.backgroundColor = "#1560bd";

     // change the text color
     link[i].style.color = "#ffffff";

     // change the font weight
     link[i].style.fontWeight = "bold";

   }

}

The code be used on your web page of choice. Below, i have highlighted some link(s) on the MDN home page.

If you'd rather work with a local html file, the procedure is the same but here are some code snippet you can work with. First the HTML, copy and paste in your code editor and save as colorlinks.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Highlighting Links with JavaScript</title>
    <link rel="stylesheet" href="colorlinks.css">
</head>
</head>
<body>
  <ul>
    <li><a href="https://google.com">Google</a></li>
    <li><a href="https://toptal.com">Toptal</a></li>
    <li><a href="https://twitter.com">Twitter</a></li>
    <li><a href="https://toptal.com">Toptal</a></li>
    <li><a href="https://mobile.twitter.com">Mobile Twitter</a></li>
  </ul>
</body>
</html>

The CSS (for cosmetics), copy and paste in your code editor and save as colorlinks.css

/* ========== Cosmetics ============== */
body {
  background-color: #f9f9fa;
}

ul {
  border: 2px solid #cccccc;
  padding: 0;
  width: 100%;
}

@media screen and (min-width: 48em) {
  ul {
    width: 60%;
    margin: 0 auto;
  }
}

li {
  list-style: none;
  border-bottom: 1px solid #cccccc;
  margin: 0;
}

a {
  text-decoration: none;
  color: #1560bd;
  font-size: 120%;
  display: block;
  padding: 8px 16px;
}

.highlighted {
  font-weight: bold;
  background-color: #1560bd;
  color: #ffffff;
}

and the JavaScript, create opening and closing script tag just above the closing </body> tag, copy the following code and paste between the tags:

// get all anchor tags
let link = document.getElementsByTagName('a');

// loop through it, since its an  HTMLCollection
for (let i = 0; i < link.length; i++) {

  // if link includes our keyword, in this case the word
  // 'tal'
  if (link[i].href.includes('tal')) {

     // add the highlighted class
     links[i].classList.add('highlighted');

   }

}

Taking a closer look at the JavaScript code, you'll realize we are not applying inline styles, instead we've opt to add an .highlighted CSS class to the link to just keep things simple (kind of).

Save all files (the html and css), and load the file in your browser, you should get an output similar to the image below:

Have Fun!.

Highlighting links with JavaScript