Question

我正在处理以下代码。我该如何Bold仅在具有该字符的元素组中确切的字母？

我不想加粗整个字符串（因为我现在可以更改整个字符串的字体粗细），但是我只想加粗该字符。例如，a仅在此处。

var boldLetter = "a";
 $("button").each(function(){
    if($(this).text().includes(boldLetter)){
       $(this).css('font-weight','bold');
    }
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button">Afghanistan</button>
<button type="button">Antarctica</button>
<button type="button">Mali</button>
<button type="button">Canada</button>
<button type="button">US</button>
<button type="button">France</button>
<button type="button">Chile</button>
<button type="button">Peru</button>

Answer 1

使用strong标签将文本换行以实现您的结果。要迭代和更新HTML内容，请使用html()方法和一个回调，该回调在内部进行迭代并使用返回的值更新内容。要包装字符，请使用String#replace方法。

要替换多个匹配项，您需要使用带有全局标记的RegExp（添加i以忽略大小写），因此请使用RegExp constructor。

var boldLetter = "a";
$("button").html(function(_, html) {
  return html.replace(new RegExp(boldLetter, 'gi'), '<strong>$&</strong>');
});

var boldLetter = "a";
$("button").html(function(_, html) {
  return html.replace(new RegExp(boldLetter, 'gi'), '<strong>$&</strong>');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button">Afghanistan</button>
<button type="button">Antarctica</button>
<button type="button">Mali</button>
<button type="button">Canada</button>
<button type="button">US</button>
<button type="button">France</button>
<button type="button">Chile</button>
<button type="button">Peru</button>

或使用具有style属性的范围将其包装。

var boldLetter = "a";
$("button").html(function(_, html) {
  return html.replace(new RegExp(boldLetter, 'gi'), '<span style="font-weight:bold">$&</span>');
});

var boldLetter = "a";
$("button").html(function(_, html) {
  return html.replace(new RegExp(boldLetter, 'gi'), '<span style="font-weight:bold">$&</span>');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button">Afghanistan</button>
<button type="button">Antarctica</button>
<button type="button">Mali</button>
<button type="button">Canada</button>
<button type="button">US</button>
<button type="button">France</button>
<button type="button">Chile</button>
<button type="button">Peru</button>

仅供参考： ：如果您的字符串包含在正则表达式中具有特殊含义的任何内容，则必须使用\\对其进行转义。

引用：Is there a RegExp.escape function in Javascript?

字符串中的粗体特定字母

1 个答案: