jQuery: replace text inside element using .replace()

Question

I want to perform a "find and replace" operation on the text of certain elements stored in a jQuery object. I want to replace the text using the javascript function .replace(), which uses a regex selector. How to I correct this sample code?

$(JQUERY_OBJECT).html(
    $(this).text().replace(/REGEX_EXPRESSION/, 'REPLACEMENT_TEXT')
);

Note: The jQuery objects I am manipulating may contain child elements, but I do not want to preserve them. That is why I am using .text(). If it is possible to run the .replace() function without discarding inner elements, though, that would be great.

ekhaled · Accepted Answer · 2012-02-15 13:25:42Z

3

Provided you are using a very recent version of jQuery, the .html() method accepts a function as an argument, the function receives the current content as an argument and the return value is used to replace the current contents.

So the code would be:

$(JQUERY_OBJECT).html(function(idx,oldHtml){
   //idx is the index of the current element in the JQUERY_OBJECT
   return oldHtml.replace(/REGEX_EXPRESSION/, 'REPLACEMENT_TEXT')
});

http://api.jquery.com/html/#html2

Using .text() it's the same story

$(JQUERY_OBJECT).text(function(idx,oldText){
   //idx is the index of the current element in the JQUERY_OBJECT
   return oldText.replace(/REGEX_EXPRESSION/, 'REPLACEMENT_TEXT')
});

http://api.jquery.com/text/#text2

Or to re-write what you have already got using a combination of .html and .text

$(JQUERY_OBJECT).html(function(idx,oldHtml){
   return $(this).text().replace(/REGEX_EXPRESSION/, 'REPLACEMENT_TEXT')
});

edited Feb 15, 2012 at 13:25

answered Feb 13, 2012 at 21:36

ekhaled

2,9281 gold badge22 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Brandon Lebedev Over a year ago

1. Could you provide a link to the jQuery docs explaining the input arguments you told me about. I could not find an explanation of what you told me on the jQuery .html() doc page.

Brandon Lebedev Over a year ago

2. I need to get the contents of the element using the .text() function, not .html(). Could you revise your answer accordingly?

ekhaled Over a year ago

2. But you would like to preserve the children of the elements, Don't think you can do that with .text()

ekhaled Over a year ago

1. The link is already in the answer, if you can't see it when the page is loaded, do a search in the browser for .html( function(index, oldhtml) ) when you get to that page.

ekhaled Over a year ago

Edited my answer to include the use of .text() in 2 different ways

adeneo · Accepted Answer · 2012-02-13 21:25:59Z

0

var text = $(this).text().replace(/REGEX_EXPRESSION/, 'REPLACEMENT_TEXT');
$(this).text(text);

Or you could use replaceWith instead of the second text() if that's more appropriate?

answered Feb 13, 2012 at 21:25

adeneo

319k29 gold badges410 silver badges392 bronze badges

Collectives™ on Stack Overflow

jQuery: replace text inside element using .replace()

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related