How Can I Highlight a Single Instance of Text in JavaScript?

Highlight Text with JavaScript

Highlighting specific text on a web page can enhance user experience and draw attention to important content. This demonstration focuses on a single-occurrence highlighting, unlike the typical highlight effect that identifies all instances of the text, which is commonly used in search functionality.

jQuery Highlight Effect

For a quick and easy solution, the jQuery highlight effect can be employed:

$(selector).highlight(text, options);

Simply specify the text and highlight options to achieve your desired result.

Custom JavaScript Code

If you prefer a raw JavaScript approach, consider this code snippet:

function highlight(text) {
  // Get the target element
  var inputText = document.getElementById("inputText");

  // Extract the element's HTML content
  var innerHTML = inputText.innerHTML;

  // Locate the first occurrence of the text
  var index = innerHTML.indexOf(text);

  // Check if text is found
  if (index >= 0) { 
    // Inject highlight markup around the matching text
    innerHTML = innerHTML.substring(0, index) + "<span class='highlight'>"
                + innerHTML.substring(index, index + text.length) + "</span>"
                + innerHTML.substring(index + text.length);

    // Update the element with highlighted text
    inputText.innerHTML = innerHTML;
  }
}

Don't forget to add the corresponding CSS style for the 'highlight' class:

.highlight {
  background-color: yellow;
}

Usage Example

To highlight the word "fox" in a specific div element, simply invoke the highlight function:

<button onclick="highlight('fox')">Highlight</button>

<div>

Clicking the button will highlight the first occurrence of "fox" in yellow.

The above is the detailed content of How Can I Highlight a Single Instance of Text in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!