Jquery Replace specific text in all element

Scenario

Imagine you have a set of elements with the class specific_class, and they all contain the phrase “old text.” You want to replace this phrase with “New text” programmatically.

The Solution

Here’s a simple jQuery script to achieve this:

(function ($) {
    "use strict";

    jQuery(document).ready(function ($) {
        $('.specific_class').each(function() {
            var text = $(this).text();
            $(this).text(text.replace('old text', 'New text')); 
        });
    });

}(jQuery));

How It Works

• jQuery Ready Function: The jQuery(document).ready() ensures the DOM is fully loaded before executing the script.
• Target Specific Elements: The $(‘.specific_class’) selector targets all elements with the class specific_class.
• Loop Through Elements: The .each() method iterates through each element with the specified class.
• Get the Current Text: The $(this).text() retrieves the text content of the current element in the loop.
• Replace the Text: The .replace(‘old text’, ‘New text’) method replaces the specified string.
• Set the Updated Text: The updated text is set back to the element using $(this).text(updatedText).

Things to Keep in Mind

• Case Sensitivity: The replace() method is case-sensitive. Use a regular expression with the i flag for case-insensitive replacements.
• Performance: While .each() is great for small to medium-sized datasets, consider optimizing for larger datasets.
• Special Characters: If the text to replace contains special characters, you may need to escape them.

Extending the Script

(function ($) {
    "use strict";

    jQuery(document).ready(function ($) {
        var oldText = 'old text';
        var newText = 'New text';

        $('.specific_class').each(function() {
            var text = $(this).text();
            $(this).text(text.replace(oldText, newText)); 
        });
    });

}(jQuery));

jQuery provides a quick and efficient way to manipulate text on your website. By combining the power of selectors, loops, and the replace() method, you can easily update content dynamically without modifying the HTML source.