Question

我的简单文本搜索在IE9中运行良好，但在IE8＆amp; 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;}

附注：

我还更新了您的初始.replace()以删除现有代码。。。使用正则表达式，你可以在一次调用中完成，而不是两次。
初始.replace("</hl>")缺少替换文字。。。它必须是.replace("</hl>", "")。这实际上使它在IE9中失败了，当我测试它时（认为Firefox把它当作冠军:)）

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

1 个答案: