How to highlight text using javascript

by

You can use the jquery highlight effect.

But if you are interested in raw javascript code, take a look at what I got
Simply copy paste into an HTML, open the file and click “highlight” – this should highlight the word “fox”. Performance wise I think this would do for small text and a single repetition (like you specified)

function highlight(text) {
  var inputText = document.getElementById("inputText");
  var innerHTML = inputText.innerHTML;
  var index = innerHTML.indexOf(text);
  if (index >= 0) { 
   innerHTML = innerHTML.substring(0,index) + "<span class="highlight">" + innerHTML.substring(index,index+text.length) + "</span>" + innerHTML.substring(index + text.length);
   inputText.innerHTML = innerHTML;
  }
}
.highlight {
  background-color: yellow;
}
<button onclick="highlight('fox')">Highlight</button>

<div id="inputText">
  The fox went over the fence
</div>

Edits:

Using replace

I see this answer gained some popularity, I thought I might add on it.
You can also easily use replace

"the fox jumped over the fence".replace(/fox/,"<span>fox</span>");

Or for multiple occurrences (not relevant for the question, but was asked in comments) you simply add global on the replace regular expression.

"the fox jumped over the other fox".replace(/fox/g,"<span>fox</span>");

Hope this helps to the intrigued commenters.

Replacing the HTML to the entire web-page

to replace the HTML for an entire web-page, you should refer to innerHTML of the document’s body.

document.body.innerHTML

More Related Contents:

  1. Textarea that can do syntax highlighting on the fly?
  2. Search and Highlight in jQuery
  3. Change background image php loop [closed]
  4. Convert form data to JavaScript object with jQuery
  5. Safely turning a JSON string into an object
  6. Why avoid increment (“++”) and decrement (“–“) operators in JavaScript?
  7. How do I create a dynamic key to be added to a JavaScript object variable [duplicate]
  8. Call An Asynchronous Javascript Function Synchronously
  9. Create a custom callback in JavaScript
  10. Zoom in on a point (using scale and translate)
  11. Injecting javascript variable before content script
  12. How to use getElementsByClassName in javascript-function? [duplicate]
  13. Javascript fuzzy search that makes sense
  14. Convert MySql DateTime stamp into JavaScript’s Date format
  15. Is using an ES6 import to load specific names faster than importing a namespace?
  16. ngRepeat Filter by deep property
  17. Underscore: sortBy() based on multiple attributes
  18. Child element click event trigger the parent click event
  19. Convert object to array of key–value objects like `{ name: “Apple”, value: “0.6” }`
  20. Extract all email addresses from bulk text using jquery
  21. Cross-browser (IE8-) getComputedStyle with Javascript?
  22. Count animation from number A to B
  23. Plotting points on a map with D3
  24. Why does headless need to be false for Puppeteer to work?
  25. What does ” [native code] ” mean?
  26. JavaScript “Uncaught TypeError: object is not a function” associativity question
  27. ‘this’ in function inside prototype function [duplicate]
  28. TFS 2015 REST API Authentication
  29. Properly Create and Serve PDF Blob via HTML5 File and URL APIs
  30. Extracting the exponent and mantissa of a Javascript Number

Leave a Comment