1

私はテキストの行を持っています：

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

そして、括弧とその間のテキストのスタイルを設定したいと思います。理想的にはspan、それらの周りに配置します。

ここでソリューションを適応させようとしましたが、機能させることができません。

4

2 に答える 2

6

この HTML がある場合:

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

この JavaScript を使用して、要求に応じてスパンを追加できます。

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 に答える