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

Question

我的簡單文本搜索在IE9中效果很好，但在IE8和IE7中效果不佳。 替換功能一定有問題。 能否請你幫忙？ 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

之所以令人窒息，是因為<hl> （起初我以為是1，而不是小寫的“ L”）不是有效的HTML標記，而IE的早期版本不喜歡這種標記。

我建議將“ hl”變成一個類，並將其分配給<span>標記，以代替自定義的<hl>標記。 您的HTML很好。 。 。 您只需要更改您的JS和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;}

或者，如果您在“搜索”范圍中永遠沒有任何其他<span>標記，則可以只添加普通的<span> ，而不添加類，如下所示：

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

。 。 。 並將樣式更改為：

.search span {background-color: orange;}

一些注意事項：

1. 我還更新了您的初始.replace()來刪除現有標簽。 。 。 使用正則表達式，您可以一次調用，而不是兩次調用。
2. 最初的.replace("</hl>")缺少替換文本。 。 。 它必須是.replace("</hl>", "") 。 實際上，這使它在IE9中失敗，當我對其進行測試時（Firefox認為它像冠軍:)）