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

Что я хочу сделать, это использовать jQuery, чтобы найти фрагмент текста в абзаце и добавить CSS, чтобы сделать его полужирным. Я не могу понять, почему это не сработает:

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

Текст в "about_theresidency" динамически втягивается, поэтому я выполняю его после загрузки окна.

Ответы

Ответ 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']
});

Ответ 2

У меня была аналогичная проблема и я попытался использовать решение, предложенное elclanrs. Он отлично работает, но только если у вас нет элементов HTML в тексте, который вы хотите изменить. Если в тексте были теги, они потерялись бы после запуска функции wrapInTag.

Вот мое внутреннее решение node для решения проблемы (я включил ссылки на ресурсы, которые я использовал для написания кода).

// 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

Ответ 3

Try:

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

Ответ 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)