Javascriptを/ jQueryの - 文字列からグラブ最初と最後の単語、クラス

Question

で包むだから私はBLOCKQUOTEを持っている：

<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 - テキストは常に変更されるため、最初と最後の単語は常に同じ単語になるとは限りません。

これを行う方法はありますか？ jQueryのを使用して

Answer 1

はまず、配列にテキストを分割し、配列の最初と最後の要素を変更して、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>

Answer 2

に参加：

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

Answer 3

あなたのようなsplit()とrepliceを使用することができます。

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>

Answer 4

あなたはまた、正規表現を使用することができます - 正規表現を使用して、最初と最後の単語を見つけるとに包まれたその言葉に置き換えますspan - 選択した単語を$ 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>');