Highlight a text, every time page loads with JavaScript

To highlight a text, every time page loads, use the for loop and the concept of −

<span class=”yourColorName”>


 Live Demo

<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
   .yellow {
      color: yellow;
   .blue {
      color: blue;
<h1 id="pageLoads">My yellow Words,your blue Words</h1>
   var ids = document.getElementById("pageLoads");
   var loadColorWords = ids.innerHTML.split(" ");
   for(var i = 0; i < loadColorWords.length; i++) {
      if(loadColorWords[i] == "blue") {
         loadColorWords[i] = "<span class='blue'>" + loadColorWords[i] + "</span>";
      if(loadColorWords[i] == "yellow") {
         loadColorWords[i] = "<span class='yellow'>" + loadColorWords[i] + "</span>";
   ids.innerHTML = loadColorWords.join(" ");

To run the above program, save the file name anyName.html(index.html) and right click on the file and select the option open with live server in VS code editor.


Updated on: 16-Jul-2020


Kickstart Your Career

Get certified by completing the course

Get Started