JQuery: find text and replace it with HTML

Question

I am trying to find and replace text (using jQuery). I'm actually trying to add a span element around the text. I would also have to delete the breach again without losing the text inside.

For example, let's say I have the following situation to start with:

<span>This is a span element</span> 

And I want this to be able to be dynamically used using jQuery / JavaScript:

 <span>This is a <span class="marked">span</span> element</span> 

I will also be able to remove span.marked and return to the first result.

However, the problem is that I want to do this in all the text inside the container with several children and children, etc.

The code I received so far will do the following, and this is not what I want:

 <<span class="marked">span</span>>This is a <span class="marked">span</<span class="marked">span</span> element</span> 

I want to do this for ALL of the text on the page, and not just for the first.

EDIT: my code so far for this:

 var re = new RegExp(word, 'g'); $('.container').html($('.container').html().replace(re, '<span class="marked">' + word + '</span>')); 

A word is a line with text to wrap around.

Answer 1

To wrap the search string in html, you can use something like this:

 $('span:contains("word")').html().replace('word', '<span class="marked">word</span>'); 

and to remove it you can use something like this:

 $('span:contains("word")').html().replace('<span class="marked">word</span>', 'word'); 

Yes, this is a pretty crude way to do this, but it should work.

EDIT: as indicated by @ user3558931, the word must be a variable.

To wrap the search string in html, you can use something like this:

 $('span:contains("' + str + '")').html().replace(str, '<span class="marked">' + str + '</span>'); 

and to remove it you can use something like this:

 $('span:contains("' + str + '")').html().replace('<span class="marked">' + str + '</span>', str); 

EDIT: Crash in the above code, see Fixed code in this script: http://jsfiddle.net/thePav/7TNk6/21/

Answer 2

 $('.container p').each(function() { var text = $(this).text(); $(this).html(text.replace('word', '<strong><span class="accordion">word </span></strong>')); }); 

Answer 3

Do not use regex. Use a DOM bypass that will be much more reliable, faster, and less destructive (for example, event handlers will not be destroyed).

See fooobar.com/questions/815823 / ... for a simple example.

Alternatively, you can use the following:

http://james.padolsey.com/javascript/replacing-text-in-the-dom-solved/

This does not apply to removing gaps after that, but this is a fairly simple question. Something like the following (untested):

 function replaceWithOwnChildren(el){ var parent = el.parentNode; while (el.hasChildNodes()) { parent.insertBefore(el.firstChild, el); } parent.removeChild(el); } // Create a non-live standard array of spans var spans = [].slice.call(document.getElementsByTagName("span"), 0); for (var i = 0, len = spans.length; i < len; ++i) { if (spans[i].className == "marked") { replaceWithOwnChildren(spans[i]); } } // Glue together any adjacent text nodes document.normalize(); 

Answer 4

I believe that the regular expression needs to be adjusted so that it does not select <span or any other HTML tag. I would suggest RegExp:

 var re = new RegExp('[^<\\/](' + word + ')', 'g'); 

And replacement:

 $('.container').each(function() { $(this).html( $(this).html().replace( re, ' <span class="marked">$1</span>' ) ); }); 

And can be canceled with the code (click the button in the demo below):

 $('button.undo').on( 'click', function() { $('.container').find( 'span.marked' ).each(function() { $(this).replaceWith( word ); }); }); 

JS FIDDLE DEMO

OTHER DEMO

Answer 5

Try using the following:

 $('.container').forEach(function(){ $(this).html().... }) 

If this is your problem. Otherwise, please specify what exactly does not work, as expected?

Answer 6

 var span = document.getElementsByTagName("span")[0]; span.innerHTML = span.innerHTML.replace(/span/g, "<span class=\"marked\">span</span>"); 

http://jsfiddle.net/7TNk6/1/

Answer 7

  var mark = function (word) {
     return function () {
         this.innerHTML = this.innerHTML.replace (word, '' + word + '');
     }
 };
 $ ('span'). each (mark ('span'));