Найдите текстовую строку в jQuery и выделите ее жирным шрифтом

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

Я превратил его в маленький плагин, здесь:

$.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

Нужен более безопасный метод, который мог бы сбежать.Вот ванильное решение

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)