Question

我想要做的是使用jQuery在段落中查找一段文本并添加一些CSS以使其变为粗体。我似乎无法弄清楚为什么这不起作用：

$(window).load(function() {
// ADD BOLD ELEMENTS
$('#about_theresidency:contains("cross genre")').css({'font-weight':'bold'});
});

“about_theresidency”中的文本被动态拉入，因此我在窗口加载后执行它。

Answer 1

您可以将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']
});

Answer 2

我遇到了类似的问题，并尝试使用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);
        }
    });
};

示例：http://jsbin.com/hawog/1/edit

Answer 3

尝试：

$(window).load(function() {
// ADD BOLD ELEMENTS
    $('#about_theresidency:contains("cross genre")').each(function(){
        $(this).html( 
            $(this).html().replace(/cross genre/g,'<strong>$&</strong>')
        );
    });
});

Answer 4

需要一种更安全的方法，可以逃脱。这是一个香草解决方案

＆＃13;

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;

Answer 5

我已将@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>

在jQuery中查找文本字符串并使其变为粗体

5 个答案: