jQuery Replace All Text On Page

This jQuery code snippet replaces all text on a webpage with a specified string. Useful for dynamically changing company names or other text based on variables. Remember that .replace() returns a new string; you must reassign it to the element to update the page.

Here's how to use it:

// Replace all periods (.) on the page with hyphens (-)
var replace_str = $('body').html().replace(/./g,'-');
$('body').html(replace_str);

// Alternative method if the above doesn't work
var strNewString = $('body').html().replace(/./g,'---');
$('body').html(strNewString);

Frequently Asked Questions (FAQs): jQuery String Replacement

Q1: How do I replace a string within HTML content using jQuery?

jQuery efficiently replaces strings in HTML using .html() and JavaScript's replace(). Select the element, get its HTML using .html(), apply replace(), and then update the element's HTML with the result.

$("p").html(function(index, oldHtml) {
  return oldHtml.replace("old string", "new string");
});

Q2: Can I replace multiple occurrences of a string?

Yes, but replace() only replaces the first occurrence. Use a regular expression with the "g" flag (global) for all instances:

$("p").html(function(index, oldHtml) {
  var regex = new RegExp("old string", "g");
  return oldHtml.replace(regex, "new string");
});

Q3: How do I target specific parts of the HTML?

Use more precise jQuery selectors. For example, to replace strings in paragraphs with the class "myClass":

$(".myClass").html(function(index, oldHtml) {
  var regex = new RegExp("old string", "g");
  return oldHtml.replace(regex, "new string");
});

Q4: Can I replace strings within attribute values?

Yes, use the .attr() method:

$("img").attr("src", function(index, oldSrc) {
  var regex = new RegExp("old.jpg", "g");
  return oldSrc.replace(regex, "new.jpg");
});

Q5: Can I replace a string with HTML content?

Yes. The .html() method accepts HTML as a replacement: The following example replaces "old string" with HTML content. Note that this is functionally equivalent to the examples above, as "new string" could be HTML.

$("p").html(function(index, oldHtml) {
  var regex = new RegExp("old string", "g");
  return oldHtml.replace(regex, "<b>new string</b>"); // "new string" could be any HTML
});

The above is the detailed content of jQuery Replace All Text On Page. For more information, please follow other related articles on the PHP Chinese website!