javascript - 如何设置括号及其之间的文本样式？

Question

我有一行文字:

<h1 class="productName">Product Name (Blue)</h1>

我希望对括号和中间的文本进行样式设置 - 理想情况下在它们周围放置一个 span 。

我尝试调整解决方案here ，但我无法让它工作。

Answer 1

如果您有以下 HTML:

<div id="test">Product name (colour)</div>

您可以使用此 javscript 根据要求添加跨度:

var o = document.getElementById("test")
o.innerHTML = o.innerHTML.replace(/\([^\)]*\)/, '<span class="highlight">$&</span>');

然后，为该类设置 CSS 来控制格式。

如果您想替换多个，则必须添加 g 标志并稍微更改正则表达式以实现最小匹配而不是最大匹配:

var o = document.getElementById("test")
o.innerHTML = o.innerHTML.replace(/\([^\)]*?\)/g, '<span class="highlight">$&</span>');.

您可以在这里看到它的工作原理:http://jsfiddle.net/jfriend00/NyaZ2/ .

好的，现在您已经包含了 HTML，您可以使用 jQuery 来完成它，如下所示:

var o = $(".productName");
o.html(o.html().replace(/\([^\)]*?\)/g, '<span class="highlight">$&</span>'));