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

Answer 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>

如何设置圆括号和它们之间的文字？

2 个答案: