1

私はこのdivを持っており、最初の文にスタイルを追加したいと思います。

<div class="text">dfgdfg.asdhasd</div>

このコードを試していますが、期待どおりに機能していません。

var text = $('.text').html().split(".")[0]+".";

$(".text:contains("+text+")").css("color", "red");

デモ

4

3 に答える 3

2

これは、ページに.text要素が1つしかない場合にのみ機能します。

var elem = $('.text');
var textParts = elem.html().split(".");
var first = "<span class='red'>" + textParts.shift() + ".</span>";
elem.html(first + textParts.join("."));

複数ある場合は、各ループが必要になります。

var elems = $('.text');
elems.each( function(){
    var elem = $(this);
    var textParts = elem.html().split(".");
    var first = "<span class='red'>" + textParts.shift() + ".</span>";
    elem.html(first + textParts.join("."));
});

もちろん、これは色を設定するためにクラスを使用します、基本的なクラスは

.text .red{
    color: #FF0000;
}

実行例： http： //jsfiddle.net/a68dS/1/

于 2012-11-08T23:32:59.490 に答える
2

http://jsfiddle.net/wp5kw/を参照してください

次の段落を想定します。

<p id="para"> This is a test. Is it? Yes, it is indeed! 
You might ask, is this a sentence? To which I would reply 
with a resounding "YES"!!!</p>

すべての文を取得するには、次を使用します。

var sentences=$('#para').text() // get example text
        .match(/[^\.\!\?]+[\.\!\?]+/g) // extract all sentences
        .map(function(s){ // (optional) remove leading and trailing whitespace
            return s.replace(/^\s+|\s+$/g,'');
        });

最初の文を強調表示するには、次を使用します。

var count=0;
$('#para2').html(
    $('#para')
        .text()
        .match(/[^\.\!\?]+[\.\!\?]+/g)
        .map(function(s){
            s=s.replace(/^\s+|\s+$/g,'');
            return count++
                ? s
                : '<span style="color:red">'+s+'</span>'
        }).join(' ')
);

正規表現は、ピリオド、感嘆符、疑問符が文の終了に使用されることを前提としています。これは次のとおりです。

[^\.\!\?]+         -- one or more non-sentence terminals
[\.\!\?]+          -- followed by one or more sentence terminals
于 2012-11-09T00:28:37.650 に答える
0

要素でラップする必要があります。cssをテキストノードに適用することはできません。

var $div = $('.text');
var text = $div.text();

$div.html( text.replace(/.+?\./, '<span>$&</span>') );

デモ： http： //jsbin.com/ezojic/1/edit

于 2012-11-08T23:35:44.580 に答える