首页 >web前端 >css教程 >如何使用 jQuery 查找段落中的特定文本并将其加粗?

如何使用 jQuery 查找段落中的特定文本并将其加粗?

Mary-Kate Olsen
Mary-Kate Olsen原创
2024-11-25 06:41:18316浏览

How Can I Use jQuery to Find and Bold Specific Text Within a Paragraph?

使用 jQuery 查找文本并加粗

处理动态内容时,必须利用 jQuery 的功能来增强文本并创建更大胆的视觉效果。一种常见的情况是在段落中找到特定的文本字符串并对其应用粗体格式。

但是,您可能会遇到以下代码的问题:

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

要克服这个问题,考虑使用 jQuery 的 html() 方法实现一个强大的解决方案:

var html = $('p').html();
$('p').html(html.replace(/world/gi, '<strong$&</strong>'));

此代码用强标签替换所有出现的“world”,强调段落中的文本。

为了更具适应性的方法,您还可以创建一个小插件:

$.fn.wrapInTag = function(opts) {
  var tag = opts.tag || 'strong';
  var words = opts.words || [];
  var regex = RegExp(words.join('|'), 'gi'); // case insensitive
  var replacement = '<' + tag + '>$&</' + tag + '>';

  return this.html(function() {
    return $(this).text().replace(regex, replacement);
  });
};

// Usage
$('p').wrapInTag({
  tag: 'em',
  words: ['world', 'red']
});

此插件为包含指定单词的文本分配粗体格式,提供用于在应用程序中自定义文本强调的多功能工具。

以上是如何使用 jQuery 查找段落中的特定文本并将其加粗?的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn