javascript - 替换功能在 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 把它当作冠军 :))