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 constantly change so the first and last word WILL NOT always be the same word.

Is there a way for me to do this?

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 constantly change so the first and last word WILL NOT always be the same word.

Is there a way for me to do this?

• javascript
• jquery

Share Improve this question Follow edited Oct 16, 2016 at 22:47 Zakaria Acharki 67.5k1515 gold badges7878 silver badges106106 bronze badges asked Oct 16, 2016 at 22:23 agon024agon024 1,01711 gold badge1414 silver badges3737 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

Using jQuery first split the text into array, modify first and last element in array and then join 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./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>

With 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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>A simple sentence with few words</p>

You can also use regex - find the first and last word using regex and replace it with that word wrapped in a span - you can address the selected word with the $1 variable.

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

You could use split() and replice like :

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