Javascript / jquery - захватить первое и последнее слово из строки, затем обернуть классом

Question

Javascript / jquery - захватить первое и последнее слово из строки, затем обернуть классом

Итак, у меня есть блок-лист:

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

Что мне нужно сделать, это захватить первое и последнее слово из строки. Затем мне нужно обернуть <span class="firstWord"></span>первое слово и <span class="lastWord"></span>последнее слово в предложении.

FYI - текст будет постоянно изменяться, поэтому первое и последнее слово НЕ всегда будут одним и тем же словом.

Есть ли способ сделать это?

javascript,jquery,

4

Ответов: 4

JavaScript, JQuery,

Похожие вопросы

score 2 · Accepted Answer

2 принят

Использование jQuery сначала разбивает текст на массив, модифицирует первый и последний элемент в массиве, а затем объединяет массив

$('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>

score 1 · Accepted Answer

1

С помощью jQuery:

Я знаю:

 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>

score 1 · Accepted Answer

1

Вы также можете использовать регулярное выражение - найти первое и последнее слово с помощью регулярного выражения и заменить его на это слово, заключенное в диапазон - вы можете адресовать выбранное слово переменной $ 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>');

score -1 · Accepted Answer

-1

Вы можете использовать split()и копировать как:

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>