Question

观

如果用大括号输入字符串，我想突出显示字符串的单词（例如＆＃34; Lorem {Ipsum} Sit Dolor＆＃34;）。如果匹配，则应应用font-weight：bold。

到目前为止的方法：

＆＃13;

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);

＆＃13;

<body>
  <p id="myParagraph">This is a test string with a {bold} text. Lets {see} if this works</p>
</body>

＆＃13;

现在我得到了我的话，我需要用CSS突出显示并使用jQuery.css（）进行jQuery.each但我现在还不确定如何应用样式和刷新＆＃39; DOM自动。

Answer 1

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

正则表达式也有一点不同，因为我假设你不想在输出中保留花括号，所以它们不会保存在捕获组中。

就样式而言，您可以将元素包装在具有特定类的范围中，但我只使用了本机strong标记，因为它在语义上是正确的，并且具有您默认的样式。 / p>

＆＃13;

function bolderize(el) {
  el.innerHTML = el.innerHTML.replace(/{([^}]+)}/gm, '<strong>$1</strong>')
}
bolderize(document.getElementById('myParagraph'))

＆＃13;

<body>
  <p id="myParagraph">This is a test string with a {bold} text. Lets {see} if this works lol</p>
</body>

＆＃13;

Answer 2

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

.BeBold { font-weight: bold; }

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

所以这......

{lpsum}

......改变了这个......

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

如果您愿意，也可以在此替换期间删除花括号。

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

2 个答案: