[英]JQuery search in static HTML page with highlighting of found word
我一直在尝试使用 JQuery 在 static HTML 页面内进行简单搜索。我不得不说，这只是我第一次使用 JQuery。
我正在尝试更改页面中找到的单词的背景，这是我迄今为止尝试过的：
我的Javascript.js：
$(document).ready(function(){
$('#searchfor').keyup(function(){
page = $('#all_text').text();
searchedText = $('#searchfor').val();
$("p:contains('"+searchedText+"')").css("color", "white");
});
});
这也是 HTML 代码：
第 html 页：
<html>
<head>
<title>Test page</title>
</head>
<body bgcolor="#55c066">
<input type="text" id="searchfor"></input>
<p id="all_text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euism modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
<font color="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tinci futurum.</font>
</p>
</body>
<script src="jquery-1.7.2.min.js"></script>
<script src="myJavascript.js"></script>
</html>
在用 Firebug 检查页面后，我可以看到 JQuery 中的变量确实从输入字段中获取了值，但我想我弄乱了突出显示部分。
在此先感谢您的帮助！
从头开始构建自己的突出显示 function 可能不是一个好主意，因为您肯定会遇到其他人已经解决的问题。 挑战：
innerHTML就是这种情况）听起来很复杂？ 如果你想要一些功能，比如忽略突出显示的某些元素、变音符号映射、同义词映射、iframe 内搜索、分隔词搜索等，这会变得越来越复杂。
当使用现有的、实现良好的插件时，您不必担心上面提到的事情。 Sitepoint 上的文章10 jQuery text highlighter plugins比较了流行的荧光笔插件。 这包括这个问题的答案插件。
mark.js就是这样一个插件，它是用纯JavaScript写的，但也可以作为jQuery插件使用。 它的开发是为了提供比其他插件更多的机会，并提供以下选项：
或者你可以看到这个小提琴。
使用示例：
// Highlight "keyword" in the specified context
$(".context").mark("keyword");
// Highlight the custom regular expression in the specified context
$(".context").markRegExp(/Lorem/gmi);
它是免费的，并在 GitHub（项目参考）上开源开发。
$(function() { $("input").on("input.highlight", function() { // Determine specified search term var searchTerm = $(this).val(); // Highlight search term inside a specific context $("#context").unmark().mark(searchTerm); }).trigger("input.highlight").focus(); });
mark { background: orange; color: black; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/mark.js/7.0.0/jquery.mark.min.js"></script> <input type="text" value="test"> <div id="context"> Lorem ipsum dolor test sit amet </div>
做这样的事情
$("p:contains('"+searchedText+"')").each( function( i, element ) {
var content = $(element).text();
content = content.replace( searchedText, '<span class="search-found">' + searchedText + '</span>' );
element.html( content );
});
.search-found {
text-decoration: underline;
}
ps 这只有在每个“元素”都只有纯文本内容时才有效，否则它会删除子节点
编辑：删除了each回调中的额外')'
这是我的： http://jsfiddle.net/x8rpY/1/
记者：
$('#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);
});
CSS：
#all_text span
{
text-decoration:underline;
background-color:yellow;
}
也适用于重复搜索。
$(function() { $("input").on("input.highlight", function() { // Determine specified search term var searchTerm = $(this).val(); // Highlight search term inside a specific context $("#context").unmark().mark(searchTerm); }).trigger("input.highlight").focus(); });
mark { background: orange; color: black; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/mark.js/7.0.0/jquery.mark.min.js"></script> <input type="text" value="test"> <div id="context"> Lorem ipsum dolor test sit amet </div>
纯 JS，因为它也可以帮助其他搜索者。
使用与input文本匹配的regex （不区分大小写 - i ，所有出现 - g ）
var searchQuery = document.querySelector("#inputSearch"); var context = document.querySelector("#context"); searchQuery.addEventListener('input', searchQueryResults) function searchQueryResults() { context.innerHTML = context.textContent.replace(new RegExp(searchQuery.value, "gi"), (match) => `<u>${match}</u>`); }
<input type="text" value="" id="inputSearch"> <div id="context"> Lorem ipsum dolor test sit amet </div>
（一方面你想使用 Background-Color，而不是 Color，作为背景）
我会为正常创建一个 css class，为突出显示的文本创建一个单独的（继承的）css class，然后使用 JQuery 更改 css 8839find8181219
虽然只是我最初的想法，但不确定是否有更好的方法。
编辑：如果你只想改变一个特定的词，你必须修改 innerHTML 以将它放在一个单独的标签中。
这是我快速破解的另一个例子： http://jsfiddle.net/VCJUX/
JQuery在静态页面中搜索链接，突出显示找到的单词而不打破列表
[英]JQuery search in static page of links with highlighting of found word without breaking list
jQuery UI Autocomplete v1.8.14多字搜索+突出显示
[英]jQuery UI Autocomplete v1.8.14 Multi-word Search + Highlighting
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.