如何设置括号及其之间的文本样式？

发布于 2024-12-03 20:37:44 字数 323 浏览 1 评论 0原文

我有一行文字：

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

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

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

原文

I have a line of text:

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

and I wish to style the parentheses and the text inbetween - ideally placing a span around them.

I have tried adapting the solution here, but I can't get it to work.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

请别遗忘我 2024-12-10 20:37:44

如果您有以下 HTML：

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

您可以使用此 javscript 根据要求添加跨度：

var o = document.getElementById("test")
o.innerHTML = o.innerHTML.replace(/\([^\)]*\)/, '<span class="highlight">amp;</span>');

然后为该类设置 CSS 来控制格式。

如果您想替换多个，那么您必须添加 g 标志并稍微更改正则表达式以进行最小匹配而不是最大匹配：

var o = document.getElementById("test")
o.innerHTML = o.innerHTML.replace(/\([^\)]*?\)/g, '<span class="highlight">amp;</span>');.

您可以在这里看到它的工作原理： http://jsfiddle.net/jfriend00/NyaZ2/。

好的，现在您已经包含了 HTML，您可以使用 jQuery 来完成此操作，如下所示：

var o = $(".productName");
o.html(o.html().replace(/\([^\)]*?\)/g, '<span class="highlight">amp;</span>'));

If you have this HTML:

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

You can use this javscript to add the span as requested:

var o = document.getElementById("test")
o.innerHTML = o.innerHTML.replace(/\([^\)]*\)/, '<span class="highlight">amp;</span>');

And, then set CSS for the class to control the formatting.

If you want to replace more than one, then you would have to add the g flag and change the regex slightly for min match instead of max match to this:

var o = document.getElementById("test")
o.innerHTML = o.innerHTML.replace(/\([^\)]*?\)/g, '<span class="highlight">amp;</span>');.

You can see it work here: http://jsfiddle.net/jfriend00/NyaZ2/.

OK, now that you've included the HTML, you can do it using jQuery like this:

var o = $(".productName");
o.html(o.html().replace(/\([^\)]*?\)/g, '<span class="highlight">amp;</span>'));

回复收藏 0 原文

过去的过去 2024-12-10 20:37:44

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

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

回复收藏 0 原文

~没有更多了~