разделить абзац по первому предложению

У меня есть этот div, и я хочу добавить немного стиля к первому предложению.

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

Я пробую этот код, но не работает должным образом.

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

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

ДЕМО


jquery regex text-segmentation
person daniel__    schedule 08.11.2012    source источник

Ответы (3)


arrow_upward
2
arrow_downward

Это будет работать, только если на странице есть только один элемент .text.

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

Если их несколько, потребуется цикл each.

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/

person epascarello    schedule 08.11.2012
comment
textParts.shift не является функцией? - person daniel__; 09.11.2012
comment
В коде была опечатка, исправил. Вы, наверное, схватили его прямо перед тем, как я его отредактировал. - person epascarello; 09.11.2012
comment
Обратите внимание, что это решение предполагает, что все предложения заканчиваются точками, что не является общим случаем. Кроме того, было бы ошибочно полагать, что ‹a class=foo.bar› baz ‹/a› содержит два предложения «‹a class=foo» и «bar› baz ‹/a› ». См. Более общее решение ниже. - person Rob Raisch; 09.11.2012
comment
Также обратите внимание, что по состоянию на 19:34 EST указанная скрипта не работает, поскольку она выделяет весь текст примера. - person Rob Raisch; 09.11.2012
comment
@epascarello, можно ли передать два аргумента в сплите? ловить . или ? - person daniel__; 09.11.2012
comment
@loops regexp split(/\.\?/g), но у вас возникнут проблемы с их объединением. Посмотрите на другое решение. - person epascarello; 09.11.2012
comment
split (.) очень опасен для любого более сложного сценария. Он должен быть основан на дочерних узлах элемента. - person Adam Pietrasiak; 19.11.2014
comment
@AdamPietrasiak А как получить дочерние узлы элементов с простым текстом? - person epascarello; 19.11.2014

arrow_upward
2
arrow_downward

См. 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
person Rob Raisch    schedule 09.11.2012

arrow_upward
0
arrow_downward

Вам нужно обернуть его в элемент, вы не можете применить css к текстовым узлам:

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

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

Демо: http://jsbin.com/ezojic/1/edit

person elclanrs    schedule 08.11.2012