Javascript 用jQuery突出显示一个单词
我基本上需要突出显示文本块中的特定单词。例如，假设我想在本文中突出显示dolor一词： Lorem ipsum dolor sit amet，是一位杰出的领导者。 这是一个很好的例子。整数多洛·乌拉姆科珀·利伯罗。 阿利奎姆·朗库斯·厄罗斯在奥古斯。毛里斯之家酒店。 如何将上述内容转换为以下内容： Lorem ipsum dolor sit amet，是一位杰出的领导者。 这是一个很好的例子。整型多洛乌兰科珀 自由人。阿利奎姆·朗库斯·厄罗斯在奥古斯。毛里斯之家酒店。 使用jQuery可以做到这一点吗Javascript 用jQuery突出显示一个单词,javascript,jquery,html,Javascript,Jquery,Html,我基本上需要突出显示文本块中的特定单词。例如，假设我想在本文中突出显示dolor一词： Lorem ipsum dolor sit amet，是一位杰出的领导者。 这是一个很好的例子。整数多洛·乌拉姆科珀·利伯罗。 阿利奎姆·朗库斯·厄罗斯在奥古斯。毛里斯之家酒店。 如何将上述内容转换为以下内容： Lorem ipsum dolor sit amet，是一位杰出的领导者。 这是一个很好的例子。整型多洛乌兰科珀 自由人。阿利奎姆·朗库斯·厄罗斯在奥古斯。毛里斯之家酒店。 使用jQu
Edit:As，这在没有jQuery的情况下是完全可能的，但我希望有一种特殊的jQuery方法，它可以让您对文本本身执行选择器。我已经在这个网站上大量使用jQuery，因此将所有内容都封装在jQuery中可能会使事情变得更整洁。您需要获取p标记的内容，并用突出显示的版本替换其中的所有dolor 您甚至不需要为此使用jQuery：- 试试看！警告-此页面上可用的源代码包含加密货币挖掘脚本，请使用下面的代码或从网站下载中删除挖掘脚本
/*
highlight v4
Highlights arbitrary terms.
<http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html>
MIT license.
Johann Burkard
<http://johannburkard.de>
<mailto:jb@eaio.com>
*/
jQuery.fn.highlight = function(pat) {
function innerHighlight(node, pat) {
var skip = 0;
if (node.nodeType == 3) {
var pos = node.data.toUpperCase().indexOf(pat);
if (pos >= 0) {
var spannode = document.createElement('span');
spannode.className = 'highlight';
var middlebit = node.splitText(pos);
var endbit = middlebit.splitText(pat.length);
var middleclone = middlebit.cloneNode(true);
spannode.appendChild(middleclone);
middlebit.parentNode.replaceChild(spannode, middlebit);
skip = 1;
}
}
else if (node.nodeType == 1 && node.childNodes && !/(script|style)/i.test(node.tagName)) {
for (var i = 0; i < node.childNodes.length; ++i) {
i += innerHighlight(node.childNodes[i], pat);
}
}
return skip;
}
return this.length && pat && pat.length ? this.each(function() {
innerHighlight(this, pat.toUpperCase());
}) : this;
};
jQuery.fn.removeHighlight = function() {
return this.find("span.highlight").each(function() {
this.parentNode.firstChild.nodeName;
with (this.parentNode) {
replaceChild(this.firstChild, this);
normalize();
}
}).end();
};
是否有可能得到上述示例：
jQuery.fn.highlight = function (str, className)
{
var regex = new RegExp(str, "g");
return this.each(function ()
{
this.innerHTML = this.innerHTML.replace(
regex,
"<span class=\"" + className + "\">" + str + "</span>"
);
});
};
不要替换html标记中的文本，否则会破坏页面。这里有一个变量忽略并保留大小写：
jQuery.fn.highlight = function (str, className) {
var regex = new RegExp("\\b"+str+"\\b", "gi");
return this.each(function () {
this.innerHTML = this.innerHTML.replace(regex, function(matched) {return "<span class=\"" + className + "\">" + matched + "</span>";});
});
};
我编写了一个非常简单的函数，它使用jQuery来迭代使用.highlight类包装每个关键字的元素
function highlight_words(word, element) {
if(word) {
var textNodes;
word = word.replace(/\W/g, '');
var str = word.split(" ");
$(str).each(function() {
var term = this;
var textNodes = $(element).contents().filter(function() { return this.nodeType === 3 });
textNodes.each(function() {
var content = $(this).text();
var regex = new RegExp(term, "gi");
content = content.replace(regex, '<span class="highlight">' + term + '</span>');
$(this).replaceWith(content);
});
});
}
}
您可以使用我的highlight插件，该插件也可以用于正则表达式 要使用以下类型安装： 要使用以下类型安装： 用法： 更高级的用法为什么使用自制的突出显示功能是个坏主意 从头开始构建自己的突出显示功能可能不是一个好主意，因为您肯定会遇到其他人已经解决的问题。挑战： 您需要删除包含HTML元素的文本节点，以突出显示匹配项，而不会破坏DOM事件，也不会一次又一次地触发DOM重新生成，例如innerHTML 如果要删除突出显示的元素，则必须删除HTML元素及其内容，还必须合并拆分的文本节点以进行进一步搜索。这是必要的，因为每个highlighter插件都会在文本节点内搜索匹配项，如果您的关键字将被拆分为多个文本节点，则不会找到它们。 您还需要构建测试，以确保您的插件在您没有想到的情况下工作。我说的是跨浏览器测试！ 听起来很复杂？如果您想要一些功能，如忽略高亮显示中的某些元素、变音符号映射、同义词映射、iframe内部搜索、分隔词搜索等，这将变得越来越复杂 使用现有的插件 当使用现有的、实现良好的插件时，您不必担心上面提到的事情。Sitepoint上的文章比较了流行的highlighter插件。这包括这个问题的答案插件 看看 是一个用纯JavaScript编写的插件，但也可以作为jQuery插件使用。开发它是为了提供比其他插件更多的机会，可以选择： 单独搜索关键字，而不是完整的术语 映射变音符号，例如justo是否也应该匹配justò 忽略自定义元素中的匹配项 使用自定义高亮显示元素 使用自定义高亮显示类 映射自定义同义词 也可以在iframe中搜索 接收未找到的条款 或者你可以看到 用法示例：
jQuery.fn.highlight = function (str, className)
{
var regex = new RegExp(str, "g");
return this.each(function ()
{
this.innerHTML = this.innerHTML.replace(
regex,
"<span class=\"" + className + "\">" + str + "</span>"
);
});
};
关键字
关键字
关键字
JS $document.readyfunction{ var关键字=$lblKeyword.text； var替换=+关键字+； $.system、.filename、.content.eachfunction{ var text=$this.text； text=text.replacekeyWord，已替换； $this.htmltext； }; }; CSS .亮点{ 背景颜色：黄色； } 您可以使用以下功能突出显示文本中的任何单词function color_word(text_id, word, color) {
words = $('#' + text_id).text().split(' ');
words = words.map(function(item) { return item == word ? "<span style='color: " + color + "'>" + word + '</span>' : item });
new_words = words.join(' ');
$('#' + text_id).html(new_words);
}
但是使用jQuery更容易，不是吗；这可以通过诺基亚6310来实现，你甚至不需要PC来实现：-这适用于纯文本，但它似乎并不排除标签和属性。i、 当你在innerHTML中的div上有class属性时，搜索lass。这个函数是如何调用的？innerHTML是邪恶的，请看我的答案。此外，\\b不适用于unicode字符。此外，这个函数几乎遗漏了任何东西，例如，在嵌套子对象中搜索。这可能也很有趣：嘿，我写了一个插件，正好做到了这一点-它就像Johann Burkard插件mlarsen发布的一样，但使用正则表达式而不是字符串。如果您还需要其他功能，请告诉我。如果您需要一个宽松版本的jQuery highlight插件：从语义上讲，它不是用a突出显示单词，而是更正确地使用。您好，我来晚了，但这里还有另一个代码片段，可以帮助根据标记突出显示和过滤文本。希望这能帮助那些你不想使用innerHTML的人，因为它是微软在80年代引入的，后来又像往常一样被微软抛弃了。尽管大多数浏览器都支持innerHTML，但它是W3C标准之外的一切。你应该用什么来代替innerHTML？@Ben Benji爵士：我认为你把innerHTML和innerText混淆了，后者是微软开发的文本内容的替代品，这对规范来说确实是一个诅咒。innerHTML可能是作为微软的一个扩展开始的，但无论如何都没有被放弃；自2000年初以来，它就得到了各大浏览器的支持，早在2008年就已经成为HTML5的一部分：目前它仍在最新版本中。也不是一个很好的解决方案。我只是使用了这个，但如果我搜索例如“person”，它也会用其中的“person”替换所有类和html元素。而且小写和大写也不集成。var rgxp=new RegExp\\b+word+\\b，gim；修正了这个问题，但我认为代码不应该取代html元素。有两种解决方案，它们分别包含在一个文件中。我把它们加在上面。至少，在最坏的情况下，它们在编辑历史记录中始终可用。highlight v4有点问题。Burkard的主页上有一个补丁：在这种情况下，在这里复制代码不是一个好主意；该链接指向最新版本：。顺便说一句，-标记可能比这里的标记更好。如果您想要小而轻，highlight jquery插件确实是您的最佳选择。它非常擅长突出显示和删除与给定文本匹配的突出显示。如果需要正则表达式或其他支持；但是，请查看mark.js或从突出显示页面链接到的突出显示的任何扩展和分叉。我之所以使用“突出我自己”，是因为轻量级受到高度赞赏。重要提示：Johann Burkard在其网站提供的源代码中包含了一个挖掘脚本！！！！！！hilight不是有效的HTML元素只要忽略此警告，它是您的自定义元素，您可以编写任何您想要的内容。你看到小提琴了吗？@nickf我的剧本和你的剧本一模一样answer@user3631654不，这是一个不同的插件。我的插件可以与RegExp一起使用，并且具有智能高亮显示功能。如果您已经包含了在此插件之前提到的插件，那么可以使用var oldMark=$获得它。fn.mark.noconflict似乎有一个方法markRegExp来突出显示自定义正则表达式。因此，这不应该是一个论点。@zazu，智能高亮显示是什么意思？@user3631654如果打开智能高亮显示并传递一个单词consequence，它也会高亮显示单词结果及其其他形式，但如果传递或bla，它将不采用主题或黑色。这不会在嵌套元素中搜索，没有删除突出显示的功能，也没有许可证信息。您介意向我解释一下新RegExpterm，gi中的“gi”是什么吗？问题包含html标记，此代码将删除结果div中的所有html标记。
npm install jquitelight --save
bower install jquitelight
// for strings
$(".element").mark("query here");
// for RegExp
$(".element").mark(new RegExp(/query h[a-z]+/));
// Highlight "keyword" in the specified context
$(".context").mark("keyword");
// Highlight the custom regular expression in the specified context
$(".context").markRegExp(/Lorem/gmi);
$(function () {
$("#txtSearch").keyup(function (event) {
var txt = $("#txtSearch").val()
if (txt.length > 3) {
$("span.hilightable").each(function (i, v) {
v.innerHTML = v.innerText.replace(txt, "<hilight>" + txt + "</hilight>");
});
}
});
});
function color_word(text_id, word, color) {
words = $('#' + text_id).text().split(' ');
words = words.map(function(item) { return item == word ? "<span style='color: " + color + "'>" + word + '</span>' : item });
new_words = words.join(' ');
$('#' + text_id).html(new_words);
}
<div id='my_words'>
This is some text to show that it is possible to color a specific word inside a body of text. The idea is to convert the text into an array using the split function, then iterate over each word until the word of interest is identified. Once found, the word of interest can be colored by replacing that element with a span around the word. Finally, replacing the text with jQuery's html() function will produce the desired result.
</div>
color_word('my_words', 'possible', 'hotpink')