我一直试图让使用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代码，以及：

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的变量做得到从输入字段中的值，但我想我搞乱了高亮显示部分。

在此先感谢您的帮助！

Answer 1:

做这样的事情

 $("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回调

Answer 2:

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

为什么它可能是一个坏主意，从头开始建立自己的高亮功能的原因是因为你肯定会碰到别人已经解决的问题。挑战：

您需要删除文本节点与HTML元素来突出你的比赛，而不破坏DOM事件，并一遍又一遍地触发DOM再生（这将与例如情况下innerHTML ）
如果你想删除高亮元素，你将不得不删除HTML元素与他们的内容，并且还具有分割后的文本节点结合起来，进一步搜索。这是必要的，因为每一个荧光笔插件文本节点内搜索匹配，如果您的关键字将分裂成多个文本节点，他们不会被人发现。
您还需要构建测试，以确保你的插件中，你有没有想过的情况下工作。而且我说的是跨浏览器测试！

听起来很复杂？如果你想要一个像无视突出，变音符号映射，映射的同义词一些元素的某些功能，搜索iframe内，分离词搜索等，这变得越来越复杂。

使用现有的插件

当使用现有的，以及实施的插件，你不必担心上面提到的事情。文章10 jQuery的文本荧光笔插件上Sitepoint比较流行的高亮插件。这包括从这个问题的答案的插件。

看一看mark.js

mark.js是这样的，是用纯JavaScript的一个插件，但也可作为jQuery插件。它的开发是为了提供比选择其他插件更多的机会：

搜索关键字，而不是单独的完整任期
地图附加符号（例如，如果“斯托”应当也匹配“胡斯托”）
忽略内部的自定义元素匹配
使用自定义的突出元素
使用自定义类突出
地图自定义的同义词
搜索还iframe内
收到未找到术语

DEMO

或者你可以看到这个小提琴。

用法示例 ：

// 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>

Answer 3:

这里是我的： 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;    
}

工程还多次搜索。

Answer 4:

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

Answer 5:

（一两件事要使用背景颜色，不变色，背景）

我会给正常的，一个单独的（继承）CSS类高亮文本CSS类，然后使用jQuery来更改CSS类，当你发现你在找什么。

只是我初步的想法，虽然，不知道是否有这样做的更好的方法。

编辑：如果你想改变只有一个特定的词，你就必须修改innerHTML来把它放在一个单独的标签在这一点上。

Answer 6:

这里是我快速砍死另一个例子： http://jsfiddle.net/VCJUX/

文章来源: JQuery search in static HTML page with highlighting of found word

在静态HTML页面JQuery的搜索与发现字的突出(JQuery search in static

Answer 1:

Answer 2:

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

使用现有的插件

看一看mark.js

mark.js的关键字示例与您的代码高亮

Answer 3:

Answer 4:

Answer 5:

Answer 6:

收藏的人(0)

在静态HTML页面JQuery的搜索与发现字的突出(JQuery search in static

Answer 1:

Answer 2:

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

使用现有的插件

看一看mark.js

mark.js的关键字示例与您的代码高亮

Answer 3:

Answer 4:

Answer 5:

Answer 6:

收藏的人(0)

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮