我想要做的是使用jQuery在段落中查找一段文本并添加一些CSS以使其变为粗体。我似乎无法弄清楚为什么这不起作用:
$(window).load(function() {
// ADD BOLD ELEMENTS
$('#about_theresidency:contains("cross genre")').css({'font-weight':'bold'});
});
“about_theresidency”中的文本被动态拉入,因此我在窗口加载后执行它。
答案 0 :(得分:82)
您可以将replace()
与html()
:
var html = $('p').html();
$('p').html(html.replace(/world/gi, '<strong>$&</strong>'));
修改: http://jsbin.com/AvUcElo/1/edit
我把它变成了一个lil'插件,在这里:
$.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']
});
答案 1 :(得分:12)
我遇到了类似的问题,并尝试使用elclanrs提出的解决方案。它工作得很好,但前提是你想要改变的文本中没有html元素。如果文本中有任何标记,那么在运行wrapInTag
函数后它们就会丢失。
这是我对该问题的内部节点友好解决方案(我包含了用于编写代码的资源的链接)。
// 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);
}
});
};
答案 2 :(得分:1)
尝试:
$(window).load(function() {
// ADD BOLD ELEMENTS
$('#about_theresidency:contains("cross genre")').each(function(){
$(this).html(
$(this).html().replace(/cross genre/g,'<strong>$&</strong>')
);
});
});
答案 3 :(得分:0)
需要一种更安全的方法,可以逃脱。这是一个香草解决方案
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)
&#13;
答案 4 :(得分:0)
我已将@jahu 提供的代码调整为一种形式,您可以在其中添加数据属性,然后在 dom 上运行回调,然后调用它们的 $('foo').wrapInTag(...)
并允许这样的代码存在于您的模板:
<p data-js-highlight-text="hello,">
<span style="color: #009fff">Hello,</span> World
</p>
// Extended examples with data attributes in your html:
//
// Set the data-js-highlight-text attribute. Before:
<p data-js-highlight-text="hello,">Hello, World</p>
// After:
<p data-js-highlight-text="hello,"><span style="color: #009fff">Hello,</span> World</p>