Javascript / jquery - grab the first and last word from a string, then wrap with a class

Question

So I have a blockquote:

<blockquote>
 <p>We seek to innovate: not for the sake of doing something different, but doing something
 better.</p>
</blockquote>

What I need to do is grab the first and last word from the string. Then I need to wrap <span class="firstWord"></span>around the first word and <span class="lastWord"></span>around the last word in the sentence.

FYI - the text will be constantly changing, so the first and last word will NOT always be the same word.

Is there any way to do this?

Answer 1

Using jQuery first breaks the text into an array, modifies the first and last element in the array, and then concatenates the array

$('blockquote p').html(function(_, existing) {
  var words = existing.trim().split(' ');
  words[0] = '<span class="firstword">' + words[0] + '</span>';
  words[words.length - 1] = '<span class="lastword">' + words[words.length - 1] + '</span>';
  return words.join(' ');
});

.firstword,
.lastword {
  color: red;
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<blockquote>
  <p>We seek to innovate: not for the sake of doing something different, but doing something better.</p>
</blockquote>

Run codeHide result

Answer 2

Using jQuery:

I jsfiddle:

 var blockquote = $('p').text(), //get the text inside <p>

    bkFirst = blockquote.split(" ", 1), //get first word
    bkLast = blockquote.substring(blockquote.lastIndexOf(" ")+1), //get last word
    bkRemL = blockquote.substring(0, blockquote.lastIndexOf(" ")), //remove last word from original string (blockquote)
    bkMid = bkRemL.substr(bkRemL.indexOf(" ") + 1), //remove first word from bkRemL, to get all words but first and last.
    first = '<span class="firstWord">'+bkFirst+'</span>', //append first word on the span
    last = '<span class="lastWord">'+bkLast+'</span>'; //append last word on the span

$('p').html(first+' '+bkMid+' '+last); //join all of them.

.firstWord {
color: red;}

.lastWord {
color: blue;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>A simple sentence with few words</p>

Run codeHide result

Answer 3

regex - , - $1.

'We seek to innovate: not for the sake of doing something different, but doing something better.'
.replace(/^([\w\-]+)/,'<span class="firstWord">$1</span>')
.replace(/([^\s]+$)/,'<span class="lastWord">$1</span>');

Answer 4

You can use split()and replicate as:

var my_text = $('blockquote p').text();
var words = my_text.split(" ");
var first_word = words[0];
var last_word = words[words.length-1];

my_text = my_text.replace(first_word,'<span class="firstword">' + first_word + '</span>');

my_text = my_text.replace(new RegExp("("+last_word+")$",'g'),'<span class="lastword">' + last_word + '</span>');

$('blockquote p').html(my_text);

.firstword{
   color: red; 
}

.lastword{
   color: blue; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<blockquote>
 <p>We seek better. to innovate: not for the sake better. of doing something different, but doing something better.</p>
</blockquote>

Run codeHide result