如果正则表达式模式匹配，字符串中的粗体字

Bold word in string if regex pattern matches

本文关键字：粗体字 字符串 正则表达式 模式匹配 如果      更新时间：2023-09-26

想法：

如果字符串中的单词是用大括号键入的，我想突出显示它们(比如"Lorem｛Ipsum｝Sit Dolor"(。如果它们匹配，则应使用font-weight:bold。

迄今为止的方法：

var final = [];
var regExp = /([^{]*?)(?='})/;
var string = document.getElementById("myParagraph").innerHTML;
wordArray = string.split(/'s+/);
for (var i = 0; i < wordArray.length; i++) {
    if (regExp.exec(wordArray[i])) {
        final.push(wordArray[i]);
    }
}
console.log(final);
<body>
  <p id="myParagraph">This is a test string with a {bold} text. Lets {see} if this works</p>
</body>

现在我得到了我需要用CSS突出显示的单词，并将用jQuery.CSS((进行jQuery.each，但我现在不确定如何应用样式并自动"刷新"DOM。

使用String.prototype.replace并直接写入元素的innerHTML，可以大大简化代码。

Regex也有点不同，因为我认为你不想在输出中保留大括号，所以它们不保存在捕获组中。

在样式方面，您可以用一个特定的类将元素包装在一个跨度中，但我只是使用了原生的strong标记，因为它在语义上是正确的，并且默认情况下具有您想要的样式。

function bolderize(el) {
  el.innerHTML = el.innerHTML.replace(/{([^}]+)}/gm, '<strong>$1</strong>')
}
bolderize(document.getElementById('myParagraph'))
<body>
  <p id="myParagraph">This is a test string with a {bold} text. Lets {see} if this works lol</p>
</body>

要使用CSS应用粗体字体，请在CSS样式表文件中定义这样的CSS类。

.BeBold { font-weight: bold; }

然后，使用JavaScript将由大括号框起来的已识别字符串部分替换为包含span标记的字符串，该标记也使用新的CSS类。

所以这个。。。

{lpsum}

对此的更改。。。。

<span class="BeBold">{lpsum}</span>

如果您愿意，也可以在替换过程中删除大括号。

相关文章：