如何设置括号和括号之间的文字的样式？

Question

我有一行文字：

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

并且我希望在括号和中间的文字之间设置样式-最好在其span周围放置一个。

我曾尝试在此处调整解决方案，但无法使其正常工作。

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