替换功能在ie8 ie7中不起作用

Question

My simple text search works well in IE9 but not in IE8 & IE7. There must be something wrong with the replace function. Could you please help? http://jsfiddle.net/8zuCP/

  <input type="text" id="searchfor"/>   
  <span class="search">"Wrecking Ball"</span>   
  <span class="search">We clawed, we chained our hearts in vain</span> 
  <span class="search">We jumped never asking why</span> 
  <span class="search">We kissed, I fell under your spell.</span> 
  <span class="search">A love no one could deny</span> 


  <script>
  $('#searchfor').keyup(function(){
  $('.search').each(function() {
        var line = $(this);
        var lineText = line.text().replace("<hl>","").replace("</hl>");
        var searchedText = $('#searchfor').val();
        var regText = new RegExp("("+searchedText+")", "igm");  
        var newHtml = lineText.replace(regText,"<hl>$1</hl>");
        line.html(newHtml);
  });
  });
  </script>

CSS:

    .search hl
    {
            background-color:orange;
    }

Answer 1

It's choking because <hl> (which, at first, I thought was a number 1, and not a lowercase "L") is not a valid HTML tag and the earlier versions of IE don't like that.

I'd recommend turning your "hl" into a class and assigning it to a <span> tag in place of your custom <hl> tag. Your HTML is fine . . . you just need to change your JS and CSS:

JS

$('#searchfor').keyup(function(){
    $('.search').each(function() {
        var line = $(this);
        var lineText = line.text().replace(/<\/?span[^>]*>/, "");
        var searchedText = $('#searchfor').val();
        var regText = new RegExp("("+searchedText+")", "igm");
        var newHtml = lineText.replace(regText,"<span class='hl'>$1</span>");
        line.html(newHtml);
    });
});

CSS

.search span.hl {background-color: orange;}

Alternately, if you will never have any other <span> tags in your "search" spans, you could just add the plain <span> , with no class, like this:

        var lineText = line.text().replace(/<\/?span>/, "");
            . . .
        var newHtml = lineText.replace(regText,"<span>$1</span>");

. . . and change the style to:

.search span {background-color: orange;}

A couple of side notes:

1. I also updated your initial .replace() to remove the existing tags . . . using regex, you can do it in one call, instead of two.
2. The initial .replace("</hl>") was missing the replacement text . . . it needed to be .replace("</hl>", "") . That actually made it fail in IE9, when I tested it (thought Firefox took it like a champ :) )