Question

所以我有一个块引用：

<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>围绕句子中的最后一个单词。

仅供参考 - 文本会不断变化，因此第一个和最后一个单词不会总是相同的单词。

我有办法做到这一点吗？

Answer 1

首先使用jQuery将文本拆分为数组，修改数组中的第一个和最后一个元素，然后加入数组

＆＃13;

$('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(' ');
});

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

使用jQuery：

我jsfiddle：

＆＃13;

 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.

＆＃13;

.firstWord {
color: red;}

.lastWord {
color: blue;}

＆＃13;

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

＆＃13;

Answer 3

您也可以使用正则表达式 - 使用正则表达式查找第一个和最后一个单词并将其替换为包含在跨度中的单词 - 您可以使用$ 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

您可以使用split()并重复表达：

＆＃13;

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

＆＃13;

.firstword{
   color: red; 
}

.lastword{
   color: blue; 
}

＆＃13;

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

＆＃13;

Javascript / jquery - 从字符串中获取第一个和最后一个单词，然后使用类

4 个答案: