我一直在尝试使用 JQuery 在静态 HTML 页面中进行简单的搜索。我不得不提的是,这只是我第一次使用 JQuery。
我正在尝试更改页面中找到的单词的背景,这是我迄今为止尝试过的:
myJavascript.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 中的变量确实从输入字段获取值,但我想我搞乱了突出显示部分。
在此先感谢您的帮助!
为什么使用自制的突出显示功能是一个坏主意
从头开始构建自己的突出显示功能可能不是一个好主意,因为您肯定会遇到其他人已经解决的问题。挑战:
- 您需要删除带有 HTML 元素的文本节点来突出显示您的匹配项,而不会破坏 DOM 事件并一遍又一遍地触发 DOM 重新生成(例如,
innerHTML
)
- 如果要删除突出显示的元素,则必须删除 HTML 元素及其内容,并且还必须组合拆分的文本节点以进行进一步搜索。这是必要的,因为每个荧光笔插件都会在文本节点内搜索匹配项,如果您的关键字将被拆分为多个文本节点,则它们将不会被发现。
- 您还需要构建测试以确保您的插件在您没有考虑过的情况下工作。我说的是跨浏览器测试!
听起来很复杂?如果您想要一些功能,例如忽略突出显示中的某些元素、变音符号映射、同义词映射、iframe 内搜索、分隔词搜索等,这会变得越来越复杂。
使用现有插件
当使用现有的、实现良好的插件时,您不必担心上述事情。文章10 个 jQuery 文本荧光笔插件 https://www.sitepoint.com/10-jquery-text-highlighter-plugins/Sitepoint 上比较了流行的荧光笔插件。这包括这个问题的答案的插件。
看一下mark.js https://markjs.io/
mark.js https://markjs.io/就是这样一个用纯 JavaScript 编写的插件,但也可以作为 jQuery 插件使用。它的开发是为了提供比其他插件更多的机会,并提供以下选项:
- 单独搜索关键字而不是完整术语
- 地图变音符号(例如,如果“justo”也应该匹配“justò”)
- 忽略自定义元素内的匹配
- 使用自定义突出显示元素
- 使用自定义突出显示类
- 映射自定义同义词
- 还在 iframe 内搜索
- 收到未找到的条款
DEMO https://markjs.io/configurator.html
或者你可以看到这把小提琴 https://jsfiddle.net/julmot/vpav6tL1/.
使用示例:
// Highlight "keyword" in the specified context
$(".context").mark("keyword");
// Highlight the custom regular expression in the specified context
$(".context").markRegExp(/Lorem/gmi);
它是免费的,并在 GitHub 上开源开发(项目参考 https://github.com/julmot/mark.js).
使用代码突出显示 mark.js 关键字的示例
$(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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)