agon024 agon024 - 1 month ago 14
jQuery Question

Javascript / jquery - Grab first and last word from string then wrap with class

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?

Answer

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