is there a way to select :first-word of <p>?

Question

like we select p:first-letter? I know there is no property called p:first-word but if any other way SO user knows.

I don't want to add anything in HTML.

Answer 1

This isn't difficult in JavaScript - there's example code here (you'll need to view source to see how it works, but it does work). It doesn't depend on jQuery or any other libraries, as far as I can see.

Answer 2

You can do it in JavaScript by finding the DOM node you are interested on and taking the .innerHTML of it, adding around the first word and storing back to .innerHTML.

Answer 3

$('p').each(function(){
    var me = $(this)
       , t = me.text().split(' ');
    me.html( '<strong>'+t.shift()+'</strong> '+t.join(' ') );
  });

This bolds first word.

or

$('p').each(function(){
    var me = $(this);
    me.html( me.text().replace(/(^\w+)/,'<strong>$1</strong>') );
  });

Answer 4

You can extract the full text from the p and grab the first word with a regexp:

$('p').click(function() {
    var word = /^\w+/.exec($(this).text());
    alert(word);
});