jQuery查找并替换忽略标签

Question

I've built a little find and replace function with jQuery. ( See functional example here ) It works well until you consider formatting tags.

Assuming the following html:

Here <i>is</i> my <b>sample</b> text

If you search for sample text , the search fails due to the bold tags.

The acceptable result would be removing <b>sample</b> text , replacing it with whatever you have entered for the replacement. It should leave the italic tag alone. How could this be accomplished?

Here's what I have so far:

function findandreplace() {
  var text = $('.editor').html(),
      find = $('#find').val(),
      replace = $('#replace').val(),
      newText = text.replace(new RegExp(find, "g"), replace)
  $('.editor').html(newText);
}

Answer 1

You can use text() to ignore the tags and replace the text, but cannot retain the tags. Is this you want?

function findandreplace() {
  var text = $('.editor').text(),
      find = $('#find').val(),
      replace = $('#replace').val(),
      newText = text.replace(new RegExp(find, "g"), replace)
  $('.editor').html(newText);
}

Edit: This one satisfies the requirement, however we can generalize/optimize it further for required tags.

function findandreplace() {
     var find = $('#find').val(),
         replace = $('#replace').val()

     $('.editor').find('b').contents().unwrap();
     var text = $('.editor').html();
     var newText = text.replace(new RegExp(find, "g"), replace)
     $('.editor').html(newText);
}