在 jQuery 中查找文本字符串并使其加粗
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9794851/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Find text string in jQuery and make it bold
提问by Michael
What I want to do is use jQuery to find a piece of text within a paragraph and add some CSS to make it bold. I can't seem to figure out why this won't work:
我想要做的是使用 jQuery 在段落中查找一段文本并添加一些 CSS 使其加粗。我似乎无法弄清楚为什么这不起作用：
$(window).load(function() {
// ADD BOLD ELEMENTS
$('#about_theresidency:contains("cross genre")').css({'font-weight':'bold'});
});
The text in "about_theresidency" is dynamically pulled in, hence me executing it after the window has loaded.
“about_theresidency”中的文本是动态拉入的，因此我在窗口加载后执行它。
回答by elclanrs
You can use replace()with html():
你可以用replace()与html()：
var html = $('p').html();
$('p').html(html.replace(/world/gi, '<strong>$&</strong>'));
Edit:http://jsbin.com/AvUcElo/1/edit
编辑：http : //jsbin.com/AvUcElo/1/edit
I turned it into a lil' plugin, here:
我把它变成了一个小插件，在这里：
$.fn.wrapInTag = function(opts) {
var tag = opts.tag || 'strong'
, words = opts.words || []
, regex = RegExp(words.join('|'), 'gi') // case insensitive
, replacement = '<'+ tag +'>$&</'+ tag +'>';
return this.html(function() {
return $(this).text().replace(regex, replacement);
});
};
// Usage
$('p').wrapInTag({
tag: 'em',
words: ['world', 'red']
});
回答by jahu
I had a similar problem and tried to use the solution proposed by elclanrs. It works great, but only if you have no html elements within the text you want to alter. If there were any tags inside the text, they would have been lost after running the wrapInTagfunction.
我遇到了类似的问题，并尝试使用 elclanrs 提出的解决方案。它工作得很好，但前提是您要更改的文本中没有 html 元素。如果文本中有任何标签，运行该wrapInTag函数后它们就会丢失。
Here is my inner-node-friendly solution to the problem (I included links to the resources I used to write the code).
这是我对问题的内部节点友好解决方案（我包含了我用来编写代码的资源的链接）。
// http://stackoverflow.com/a/9795091
$.fn.wrapInTag = function (opts) {
// http://stackoverflow.com/a/1646618
function getText(obj) {
return obj.textContent ? obj.textContent : obj.innerText;
}
var tag = opts.tag || 'strong',
words = opts.words || [],
regex = RegExp(words.join('|'), 'gi'),
replacement = '<' + tag + '>$&</' + tag + '>';
// http://stackoverflow.com/a/298758
$(this).contents().each(function () {
if (this.nodeType === 3) //Node.TEXT_NODE
{
// http://stackoverflow.com/a/7698745
$(this).replaceWith(getText(this).replace(regex, replacement));
}
else if (!opts.ignoreChildNodes) {
$(this).wrapInTag(opts);
}
});
};
Example: http://jsbin.com/hawog/1/edit
回答by iambriansreed
Try:
尝试：
$(window).load(function() {
// ADD BOLD ELEMENTS
$('#about_theresidency:contains("cross genre")').each(function(){
$(this).html(
$(this).html().replace(/cross genre/g,'<strong>$&</strong>')
);
});
});
回答by Endless
Needed a more secure method, that could escape. Here is a vanilla solution
需要一种更安全的方法，可以逃脱。这是一个香草解决方案
var str = 'The world is big <b onclick="alert(false)">world</b> red. the world is also small'
var words = ['world', 'is']
var reg = RegExp(words.join('|'), 'gi')
var p = document.createElement('p')
p.innerText = str
p.innerHTML = p.innerHTML.replace(reg, '<u>$&</u>')
document.body.appendChild(p)
console.log(p.outerHTML)