How to wrap part of the text with spans using jQuery?

Question

Here is what I am trying to do

Fox<span>Rox</span>

before that

FoxRox

How do I wrap spans around Rox?

Answer 1

This will search you whole DOM and replace each Rox with <span>Rox</span>:

$(':contains("Rox")').html(function(index, oldHTML) {
    return oldHTML.replace(/(Rox)/g, '<span>$&</span>');
});​

Live DEMO

Answer 2

In this case, you could use the JavaScript replace() method:

'FoxRox'.replace(/(Rox)/, '<span>$1</span>');

To replace this all through the document, you could try the following:

$(":contains('Rox')").html(function(i,o){
  return o.replace(/(Rox)/g, '<span>$1</span>');
});​

Note, if your term is not "Rox", you'll need to change it in the above script.