split paragraph by the first sentence

Question

I have this div, and i want to add some style to the first sentence.

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

I am trying this code but is not working as expected.

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

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

DEMO

epascarello · Accepted Answer · 2012-11-09T00:39:26.847

2

This is only going to work if there is only one .text element on the page.

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

If there are multiple it will need an each loop.

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("."));
});

Of course this uses a class to set the color, basic class would be

.text .red{
    color: #FF0000;
}

Running example: http://jsfiddle.net/a68dS/1/

edited Nov 09 '12 at 00:39

answered Nov 08 '12 at 23:32

epascarello

204,599
20
195
236

textParts.shift is not a function ? – daniel__ Nov 08 '12 at 23:39
There was a typo in the code, I fixed it. You probably grabbed it right before I edited it. – epascarello Nov 08 '12 at 23:40
Note that this solution assumes that all sentences are terminated with periods, which is not the general case. Also, it would erroneously believe that "baz" contains two sentences 'baz' See a more general solution below. – Rob Raisch Nov 09 '12 at 00:32
Also note that, as of 7:34PM EST, the referenced fiddle does not work as it highlights the entire example text. – Rob Raisch Nov 09 '12 at 00:35
@epascarello, there is possible to pass two arguments in split? to catch . or ? – daniel__ Nov 09 '12 at 01:21
@loops regexp `split(/\.\?/g)` but you will have issues joining it back together. Look at the other solution. – epascarello Nov 09 '12 at 01:26
split(".") is very dangerous for any more complex scenario. It should be based on element child nodes. – Adam Pietrasiak Nov 19 '14 at 12:28
@AdamPietrasiak And how do you get element child nodes with plain text? – epascarello Nov 19 '14 at 13:32

score 2 · Answer 2 · answered Nov 09 '12 at 00:28

See http://jsfiddle.net/wp5kw/

Assuming a paragraph of:

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

To grab all the sentences, use:

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,'');
        });

To highlight the first sentence, use:

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(' ')
);

The regular expression assumes that periods, exclamation and question marks are used to terminate a sentence, and is:

[^\.\!\?]+         -- one or more non-sentence terminals
[\.\!\?]+          -- followed by one or more sentence terminals

score 0 · Answer 3 · answered Nov 08 '12 at 23:35

0

You need to wrap it in an element, you can't apply css to text nodes:

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

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

Demo: http://jsbin.com/ezojic/1/edit

answered Nov 08 '12 at 23:35

elclanrs

92,861
21
134
171

split paragraph by the first sentence

3 Answers3