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

How to style parentheses and the text inbetween them?

本文关键字：之间 何设置 文本 样式 设置      更新时间：2023-09-26

我有一行文字:

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

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

我试着在这里调整解决方案，但我不能让它工作。

如果你有这样的HTML:

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

您可以使用这个javascript来添加所需的span:

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

<!-- 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>
相关文章：