为了账号安全,请及时绑定邮箱和手机立即绑定

在jQuery中查找文本字符串并使其加粗

/ 猿问

在jQuery中查找文本字符串并使其加粗

湖上湖 2019-10-19 15:02:07

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


$(window).load(function() {

// ADD BOLD ELEMENTS

$('#about_theresidency:contains("cross genre")').css({'font-weight':'bold'});

});

动态地提取“ about_theresidency”中的文本,因此在加载窗口后执行该文本。


查看完整描述

3 回答

?
千万里不及你

你可以用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']

});


查看完整回答
反对 回复 2019-10-19
?
慕的地2183247

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


查看完整回答
反对 回复 2019-10-19
?
慕莱坞5435954

尝试:


$(window).load(function() {

// ADD BOLD ELEMENTS

    $('#about_theresidency:contains("cross genre")').each(function(){

        $(this).html( 

            $(this).html().replace(/cross genre/g,'<strong>$&</strong>')

        );

    });

});


查看完整回答
反对 回复 2019-10-19

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信