如何设计括号和它们之间的文本？答案

【问题标题】：How to style parentheses and the text inbetween them?如何设计括号和它们之间的文本？
【发布时间】：2011-11-12 13:25:44
【问题描述】：

我有一行文字：

&lt;h1 class="productName"&gt;Product Name (Blue)&lt;/h1&gt;

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

我已尝试调整解决方案 here，但无法正常工作。

【问题讨论】：

标签： javascript jquery styling parentheses

【解决方案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>'));

【讨论】：

其实文本是用h1类包裹的……有getElementByclass还是等价物？
请在您的问题中添加示例 HTML。很难猜出你的意思。使用 jQuery，我们可以使用无数种可能的选择器将正确的文本归零，但我们必须查看它周围和上方的所有相关 HTML 才能知道使用什么。
对不起 jfriend00 :( - 我已经编辑了问题以显示标记
我在我的答案中添加了一个新版本，展示了如何使用 jQuery 处理 HTML。并且，该代码将处理所有带有class="productName" 的标签。

【解决方案2】：

<!-- load jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('h1').each(function(){
        var splitChar = '(';
        var tmp = $(this).text().split(splitChar);
        if (tmp.length == 2) {
            $(this).html(tmp[0] + '<span>(' + tmp[1] + '</span>');
        }
    });
});
</script>
<style> span { color: #c00; } </style>
<body>
        <h1>Product name (colour)</h1>
        <h1>Product name (colour)</h1>
        <h1>Product name (colour)</h1>
        <h1>Product name (colour)</h1>
        <h1>Product name (colour)</h1>
        <h1>Product name (colour)</h1>
</body>

【讨论】：

我什至会说这是此页面上提供的唯一解决方案，它确实可以完美运行。标记为 answer 的选项会将每个 Parameter 1 (value 1)、Parameter 2 (value 2)、Parameter 3 (value 3) 转换为 Parameter 1 (value 1) 或转换为页面上首先出现且符合规则的任何内容。