Как стилизовать скобки и текст между ними? - PullRequest
Новая
       3

Как стилизовать скобки и текст между ними?

0 голосов
/ 08 сентября 2011

У меня есть строка текста: 

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

, и я хотел бы оформить скобки и текст между ними - в идеале поместив вокруг них span.

Я попытался адаптировать решение здесь , но я не могу заставить его работать.

Ответы [ 2 ]

5 голосов
/ 08 сентября 2011

Если у вас есть этот 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>'));
2 голосов
/ 08 сентября 2011 
<!-- 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>
...