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

我一直在尝试使用JQuery在静态HTML页面中进行简单搜索。我必须提到，这只是我第一次使用JQuery

我正在尝试更改页面中找到的单词的背景，这是我迄今为止尝试的：

myJavascript.js：

以下是HTML代码：

page.html：

测试页
Lorem ipsum door sit amet，一位杰出的领导者，一位典型的领袖，一位未来的领袖。
这是一个伟大的事业，是一个卓越的事业，是一个未来的事业。

使用Firebug检查页面后，我可以看到JQuery中的变量确实从输入字段中获取了值，但我想我弄乱了突出显示部分

提前感谢您的帮助

（有一件事你想使用背景色，而不是背景色）

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

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

编辑：如果您只想更改一个特定的单词，您必须修改innerHTML，将其放在一个单独的标记中

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

$（“p:contains（“+searchedText+”）））。每个（函数（i，元素）{
var content=$（元素）.text（）；
content=content.replace（searchedText，“+searchedText+”）；
html（内容）；
});
.搜索发现{
文字装饰：下划线；
}

p、 只有当每个“元素”都只有纯文本内容时，这才有效，否则它将删除子节点

---

编辑：删除了

每个

回调

中的额外“）”，这里是我快速破解的另一个示例：

这里是我的：

JS:

也适用于重复搜索。

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

• 您需要删除包含HTML元素的文本节点，以突出显示匹配项，而不会破坏DOM事件并反复触发DOM重新生成（例如，

  innerHTML

  ）
• 如果要删除突出显示的元素，则必须删除HTML元素及其内容，还必须合并拆分的文本节点以进行进一步搜索。这是必要的，因为每个highlighter插件都会在文本节点内搜索匹配项，如果您的关键字将被拆分为多个文本节点，则不会找到它们
• 您还需要构建测试，以确保您的插件在您没有想到的情况下工作。我说的是跨浏览器测试

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

使用现有的插件 当使用现有的、实现良好的插件时，您不必担心上面提到的事情。Sitepoint上的文章比较了流行的highlighter插件。这包括这个问题的答案插件

看看 是一个用纯JavaScript编写的插件，但也可以作为jQuery插件使用。开发它是为了提供比其他插件更多的机会，可以选择：

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

或者你可以看到

用法示例：

// 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关键字的示例

$（函数（）{
$（“input”）.on（“input.highlight”，函数（）{
//确定指定的搜索项
var searchTerm=$（this.val（）；
//突出显示特定上下文中的搜索词
$（“#上下文”）.unmark（）.mark（搜索术语）；
}).trigger（“input.highlight”）.focus（）；
});
标记{
背景：橙色；
颜色：黑色；
}

Lorem ipsum dolor试验

$（函数（）{
$（“input”）.on（“input.highlight”，函数（）{
//确定指定的搜索项
var searchTerm=$（this.val（）；
//突出显示特定上下文中的搜索词
$（“#上下文”）.unmark（）.mark（搜索术语）；
}).trigger（“input.highlight”）.focus（）；
});
标记{
背景：橙色；
颜色：黑色；
}

Lorem ipsum dolor试验
是否只需在单词或整个段落（
p
）下划线？只需在单词下划线，我将标题更改为我真正想要的，突出显示找到的单词。如果只需在搜索的单词下划线，则需要将单词包装在html标记中，如
span
（将span的样式设置为下划线）替换
p
元素的内容抱歉，稍后进行编辑，我想突出显示找到的单词。这就是我的代码要做的。划线是我尝试的第一件事，然后我改变主意，试图突出显示这个单词，但忘记了更改标题。一个想法：获取段落的文本（
$（“p:contains（“+searchedText+”）”）））.html（）
现在使用regex并用
替换（包装）这些单词，以及
 $("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;
 }

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

#all_text span
{
    text-decoration:underline;
    background-color:yellow;    
}

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

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