如何可靠地查找 jQuery 元素中的特定文本并将其加粗？-css教程-PHP中文网

如何可靠地查找 jQuery 元素中的特定文本并将其加粗？

Barbara Streisand

发布： 2024-12-09 09:53:07

原创

531 人浏览过

How Can I Reliably Find and Bold Specific Text Within a jQuery Element?

使用 jQuery 修改文本元素：查找和 Embolden

在 jQuery 中，动态操作 DOM 元素是很常见的。其中一项任务涉及在给定元素中查找特定文本并修改其外观，例如将其加粗。

考虑以下代码：

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

登录后复制

在此示例中，我们尝试在 ID 为“about_theresidency”的元素中找到文本“跨流派”，并应用 CSS 使其变为粗体。然而，这种方法可能不会产生预期的结果。要了解原因，让我们探索替代解决方案：

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

登录后复制

此方法使用 Replace() 方法来识别文本“world”并将其替换为粗体 HTML 标签。这是查找和修改特定文本的更可靠方法，因为：

它针对元素的整个 HTML 内容，而不仅仅是其直接文本节点。
它使用正则表达式(/world/gi) 执行不区分大小写的搜索和全局替换。

您还可以创建一个可重用的插件来处理此问题功能：

$.fn.wrapInTag = function(opts) {

  var tag = opts.tag || 'strong'
    , words = opts.words || []
    , regex = RegExp(words.join('|'), 'gi') // Case insensitive
    , replacement = '<'+ tag +'>$&amp;</'+ tag +'>';

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

登录后复制

用法：

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

登录后复制

此插件允许您轻松使用任何 HTML 标签在给定元素中包含特定单词。

以上是如何可靠地查找 jQuery 元素中的特定文本并将其加粗？的详细内容。更多信息请关注PHP中文网其他相关文章！