27

我一直在尝试使用 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 代码：

page.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 中的变量确实从输入字段中获取了值，但我想我搞砸了突出显示部分。

在此先感谢您的帮助！

4

7 回答 7

27

为什么使用自制的突出显示功能是个坏主意

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

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

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

使用现有插件

使用现有的、良好实现的插件时，您不必担心上述命名的事情。Sitepoint 上的文章10 jQuery text highlighter plugins比较了流行的荧光笔插件。这包括这个问题的答案插件。

看看mark.js

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

  • 单独搜索关键字而不是完整的术语
  • 地图变音符号（例如，如果“justo”也应该匹配“justò”）
  • 忽略自定义元素内的匹配项
  • 使用自定义突出显示元素
  • 使用自定义突出显示类
  • 映射自定义同义词
  • 也在 iframe 内搜索
  • 收到未找到的条款

演示

或者你可以看到这个 fiddle。

用法示例：

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

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

它是在 GitHub 上免费开发的开源软件（项目参考）。

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

于 2016-05-21T14:42:48.970 回答
14

做这样的事情

 $("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编辑：在回调中删除了额外的 ')'

于 2012-04-04T13:00:24.153 回答
11

这是我的：http: //jsfiddle.net/x8rpY/1/

JS：

$('#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;    
}

也适用于重复搜索。

于 2012-04-04T14:36:00.937 回答
5 

$(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>

于 2017-04-20T10:19:41.177 回答
0

纯 JS，因为它也可以帮助其他搜索的人。
使用与文本regex匹配的a input（不区分大小写 - 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>

于 2021-12-17T17:07:17.620 回答
-1

（对于你想要使用背景颜色而不是颜色作为背景的一件事）

我将为普通创建一个 css 类，为突出显示的文本创建一个单独的（继承的）css 类，然后在找到所需内容时使用 JQuery 更改 css 类。

只是我最初的想法，不确定是否有更好的方法。

编辑：如果您只想更改特定单词，则必须修改 innerHTML 以将其放在单独的标签中。

于 2012-04-04T12:56:05.383 回答
-1

这是我快速破解的另一个示例：http: //jsfiddle.net/VCJUX/

于 2012-04-04T13:19:22.190 回答