Highlight a text, every time page loads with JavaScript

JavascriptWeb DevelopmentObject Oriented Programming

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

<span class=”yourColorName”>

Example

 Live Demo

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<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>
<style>
   .yellow {
      color: yellow;
   }
   .blue {
      color: blue;
   }
</style>
</head>
<body>
<h1 id="pageLoads">My yellow Words,your blue Words</h1>
<script>
   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(" ");
</script>
</body>
</html>

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.

Output

raja
Published on 16-Jul-2020 07:29:21
Advertisements