JQuery在链接的静态页面中搜索，突出显示找到的单词而不破坏列表

Question

在之前看过这个帖子之后，JQuery search in static HTML page with highlighting of found word，我终于找到了我要找的东西。但是，搜索似乎破坏了其他 HTML 标记。我知道它不适合我的确切要求，但我正在寻求帮助。

这是一个 HTML 示例：

$('#searchfor').keyup(function(){
  var page = $('#all_text');
  var pageText = page.text().replace("<span>","").replace("</span>");
  var searchedText = $('#searchfor').val();
  var theRegEx = new RegExp("("+searchedText+")", "igm");    
  var newHtml = pageText.replace(theRegEx ,"<span>$1</span>");
  page.html(newHtml);
});

#all_text span {
  text-decoration: underline;
  background-color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<input type="text" id="searchfor" />
<ul id="all_text">
  <li><a href="/somewhere">Somewhere</a></li>
  <li><a href="/somewhere-else">Over there</a></li>
</ul>

在搜索框中输入后，它会删除所有<li> 标签和所有<a> 标签。我对 Javascript 或 Jquery 不是很有信心，所以我无法自己解决这个问题。它需要保留列表和超链接，但只在可见文本中搜索（即不在href字段中搜索）。

非常感谢所有输入。

Answer 1

所以我认为解决您的问题的方法是您只需要获取要突出显示的锚点的内容。下面是 jsfiddle：https://jsfiddle.net/kimaescobar/k83j7Lqv/1/ 但基本上我在可搜索的锚点中创建了一个类，而不是在 all_text 中获得所有可搜索的内容：

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<input type="text" id="searchfor" />
<ul id="all_text">
  <li><a class="searchable" href="/somewhere">Somewhere</a></li>
  <li><a class="searchable" href="/somewhere-else">Over there</a></li>
</ul>

css

#all_text em {
  text-decoration: underline;
  background-color: yellow;
}

JS

$('#searchfor').keyup(function(){
  var $page = $('#all_text .searchable');
  $page.each(function(i,a){
        $a = $(a)
      $a.html($a.html().replace(/<em>/g,"").replace(/\<\/em\>/g,""))
    })
  var searchedText = $('#searchfor').val();
  if(searchedText != ""){
    $page.each(function(i,a){
      $a = $(a)
      var html = $a.text().replace(new RegExp("("+searchedText+")", "igm"), "<em>$1</em>")
      $a.html(html)
    })
  }
});

obs：我从 span 更改为 em，因为在 html5 中，当您想要突出显示某些内容时，您使用 strong 或 em（取决于您想要的语义）。

Answer 2

因为我的编辑被拒绝了。不完全确定为什么，但他的代码可以精简很多。这是我的编辑：

所以我认为解决您的问题的方法是您只需要获取要突出显示的锚点的内容。下面是 jsfiddle：jsfiddle。基本上，我以锚标签为目标，并使用.each() 函数根据用户搜索的内容替换每个锚标签中的内容。

api documentation for .each
javascripts replace function

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<input type="text" id="searchfor" />
<ul id="all_text">
  <li><a href="/somewhere">Somewhere</a></li>
  <li><a href="/somewhere-else">Over there</a></li>
</ul>

css

#all_text span {
  text-decoration: underline;
  background-color: yellow;
}

JS

$('#searchfor').keyup(function(){
  var $page = $('#all_text a');

  var searchedText = $('#searchfor').val();

    $page.each(function(i,a){
      $a = $(a);
      $a.html($a.html().replace(/<span>/g,"").replace(/\<\/span\>/g,""));
      var html = $a.text().replace(new RegExp("("+searchedText+")", "igm"), "<span>$1</span>");
      $a.html(html);
    });
});