JQuery 在静态 HTML 页面中搜索并突出显示找到的单词

转载作者：技术小花猫更新时间：2023-10-29 12:06:13

25

4

我一直在尝试使用 JQuery 在静态 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 中的变量确实从输入字段中获取了值，但我想我弄乱了突出显示部分。

预先感谢您的帮助!

最佳答案

为什么使用自制的高亮功能不是一个好主意

从头开始构建自己的突出显示功能可能不是一个好主意的原因是，您肯定会遇到其他人已经解决的问题。挑战:

您需要删除包含 HTML 元素的文本节点以突出显示您的匹配项，而不会破坏 DOM 事件并一遍又一遍地触发 DOM 重新生成(例如 innerHTML 就是这种情况)
如果您想删除突出显示的元素，您必须删除 HTML 元素及其内容，并且还必须组合拆分的文本节点以进行进一步搜索。这是必要的，因为每个荧光笔插件都会在文本节点内搜索匹配项，如果您的关键字将被拆分为多个文本节点，则它们将找不到。
您还需要构建测试以确保您的插件在您没有考虑过的情况下工作。我说的是跨浏览器测试!

听起来很复杂？如果您想要一些功能，例如从突出显示中忽略某些元素、变音符号映射、同义词映射、在 iframe 中搜索、分隔词搜索等，这会变得越来越复杂。

使用现有插件

当使用现有的、实现良好的插件时，您不必担心上面提到的事情。文章<强>10 jQuery text highlighter plugins 在 Sitepoint 上比较流行的荧光笔插件。这包括这个问题的答案插件。

看看mark.js

mark.js就是这样一个用纯 JavaScript 编写的插件，但也可以作为 jQuery 插件使用。它的开发是为了提供比其他插件更多的机会，并提供以下选项:

单独搜索关键字而不是完整的术语
map 变音符号(例如，如果“justo”也应该匹配“justò”)
忽略自定义元素内的匹配项
使用自定义高亮元素
使用自定义高亮类
映射自定义同义词
也在 iframe 中搜索
收到未找到的条款

DEMO

或者您可以查看 this fiddle .

使用示例:

// Highlight "keyword" in the specified context
$(".context").mark("keyword");

// Highlight the custom regular expression in the specified context
$(".context").markRegExp(/Lorem/gmi);

它是免费的，并且在 GitHub ( project reference) 上开源开发。

使用您的代码突出显示 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>

关于JQuery 在静态 HTML 页面中搜索并突出显示找到的单词，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10011385/

25

4