1

我有一行文字：

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

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

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

4

2 回答 2

6

如果你有这个 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>'));
于 2011-09-07T22:27:10.537 回答
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>
于 2011-09-07T22:43:36.450 回答