之前看过这篇文章后,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
字段中搜索)。
非常感谢所有输入。
最佳答案
所以我认为你的问题的解决方案是你只需要获取你想要突出显示的 anchor 的内容。以下是 jsfiddle:https://jsfiddle.net/kimaescobar/k83j7Lqv/1/ 但基本上我在可搜索的 anchor 中创建了一个类,而不是在 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 的东西时(取决于你想要的语义)。
关于javascript - JQuery 在链接的静态页面中搜索,并在不破坏列表的情况下突出显示找到的单词,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36624519/