如何使用 jQuery 将段落中的特定文本字符串加粗？

在 jQuery 中加粗文本字符串

您正在寻找一种 jQuery 解决方案，通过加粗来突出显示段落中的特定文本字符串。但是，您的代码没有产生所需的结果：

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

此代码旨在将 ID 为“about_theresidency”的元素中包含短语“跨流派”的文本作为目标，并应用 CSS 属性“font” -weight”使其加粗。但是，它仍然无效。

解决方案

要使用 jQuery 将文本字符串加粗，您可以将 Replace() 方法与 html() 一起使用。以下代码演示了如何操作：

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

此代码片段：

1. 将段落的 HTML 内容存储在 html 变量中。
2. 使用replace( ) html 上的方法查找所有出现的文本“world”（不区分大小写）并将其包装在 内标签。
3. 使用修改后的字符串更新段落的 HTML 内容以应用粗体格式。

其他提示

代码可以细化为一个插件：

$.fn.wrapInTag = function(opts) {

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

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

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

这个插件允许你将特定的单词包装在 HTML 标签中。在提供的示例中，它将单词“world”和“red”包装在 中。标签。

以上是如何使用 jQuery 将段落中的特定文本字符串加粗？的详细内容。更多信息请关注PHP中文网其他相关文章！