How to Dynamically Wrap Words (in a String) with HTML Tags Using JavaScript

Ever wanted to jazz up your website’s text by highlighting specific words? Well, you’re in luck! In this tutorial, I’ll show you a neat trick using JavaScript to add some flair to your words with HTML tags.

// Function to highlight words with HTML tags
function highlightWords(selector, tag, index, className) {
    // Get all elements matching the selector
    var elements = document.querySelectorAll(selector);
    
    // Loop through each element
    elements.forEach(function(element) {
        // Split text content into an array of words
        var words = element.textContent.split(' ');
        
        // Check if the specified word index is within the array bounds
        if (index <= words.length) {
            // Get the word to be highlighted
            var wordToHighlight = words[index - 1];
            
            // Replace the word with HTML tag and class
            var newContent = element.textContent.replace(wordToHighlight, '<' + tag + ' class="' + className + '">' + wordToHighlight + '</' + tag + '>');
            
            // Update the element's content with the new HTML
            element.innerHTML = newContent;
        }
    });
}

Usage

highlightWords('.selector', 'span', 2, 'highlighted');

Now the real example on this page, I want to change the color of the second word in this text to red:
“Hello from me”

Now I need a selector, so I will add “my-text” class to this text:

<h2 class="my-text">Hello from me</h2>

and this is the usage of function:

highlightWords('.my-text', 'span', 2, 'second-word');

and the result:

Hello from me

<h2 class="my-text">Hello <span class="second-word">from</span> me</h2>

Explanation: Hey there! So, we’ve got this cool function called highlightWords that makes it super easy to add emphasis to words in your webpage text. Here’s how it works: you provide a CSS selector for the text elements you want to target, specify the HTML tag you want to wrap the word with, indicate the position of the word you want to highlight, and choose a class name for styling.

Oh, and if you want to highlight a different word, just tweak the index parameter to match the word’s position in the text.

Resume

In a nutshell, this tutorial walks you through a nifty JavaScript trick for spicing up your webpage’s text. By adding HTML tags dynamically, you can draw attention to specific words and give your content that extra oomph!