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

JQuery search in static page of links with highlighting of found word without breaking list

本文关键字：单词 列表 显示 静态 链接 JQuery 搜索      更新时间：2024-06-19

之前看了这篇文章，JQuery在静态HTML页面中搜索，并突出显示找到的单词，我终于找到了我想要的东西。然而，搜索似乎破坏了其他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字段中搜索）。

非常感谢所有的投入。

所以我认为问题的解决方案是，您只需要获得要突出显示的锚点的内容。下面是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（取决于你想要的语义）。

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

所以我认为你的问题的解决方案是，你只需要获得你想突出的主播的内容。下面是jsfiddle:jsfiddle。基本上，我以锚标签为目标，并使用.each()函数根据用户搜索的内容来替换每个锚标签中的内容。

.each的api文档
javascript取代函数

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);
    });
});
相关文章：