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

【问题标题】：Bold word in string if regex pattern matches如果正则表达式模式匹配，则字符串中的粗体字
【发布时间】：2017-02-12 17:30:39
【问题描述】：

想法：

如果字符串中的单词是用花括号输入的（例如“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。

【问题讨论】：

final.push("<b>" + wordArray[i] + "</b>")怎么样
是的，这比使用 jQuery 和 CSS 更好，但我的问题是如何将段落呈现为一个整体 =>
这是一个带有 的测试字符串粗体 文本。让我们看看这是否可行
。
jsfiddle.net/gj51tbcn 但看起来你已经有了一个更短更好的选择 ;)

标签： javascript html css regex dom

【解决方案1】：

您可以使用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>

【讨论】：

仅供参考：/m 修饰符在这里是多余的，可以安全删除。
真的吗？它使用 innerHTML 来获取文本内容，如果在具有不同内容的不同元素上使用它可能会有新行。

【解决方案2】：

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

.BeBold { font-weight: bold; }

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

所以这个...

{lpsum}

... 更改为这个 ....

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

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

【讨论】：