使用jquery編輯h1標籤的第一個和第二個單詞？

Question

如何在h1標籤的第一個單詞上添加一個範圍選擇，然後用jquery在第二個單詞上選擇不同的範圍選擇？

例如，我想改變：

<h1>This is a title</h1> 

到

<h1><span class="firstWord">This </span><span class="secondWord">is </span> a title</h1> 

Answer 1

var splitted = $("h1").text().split(" "); 

if(splitted.length > 0) { 
    $("h1").html('').append("<span class='firstWord'>" + splitted[0] + "<span> "); 
    if(splitted.length > 1) { 
     $("h1").append("<span class='secondWord'>" + splitted[1] + "<span> "); 
     for(var i=2;i<splitted.length;i++) { 
      $("h1").append(splitted[i] + " "); 
     } 
    } 
} 

或看到jsFiddle

Answer 2

var words = $('h1').text().split(' '); // Note that split isn't jQuery, it's just javascript. 

現在你有話數組你可以使用並退出w第i個跨度和這樣的，例如：

words[0] = '<span class="firstWord">' + words[0] + '</span>'; 
var sentence = $('h1').text(words.split(' ')); 

Answer 3

參見：http://jsfiddle.net/thirtydot/Jeuu3/

$('h1').html($('h1').html().replace(/^(\w+) (\w+)/, '<span class="firstWord">$1</span> <span class="secondWord">$2</span>')); 

---

這就是說，它會更好地使用一些更廣義的，如Lettering.js。

很簡單：

$('h1').lettering('words'); 

然後，您可以.word1和.word2添加CSS。

參見：http://jsfiddle.net/thirtydot/Jeuu3/1/

Answer 4

警告：這僅僅是安全的，如果有一個在<h1>標籤沒有HTML（這就是爲什麼.text()用於獲取初始值）。我不認爲在<h1>標籤中使用HTML確實可行。

var $h1 = $('h1'); 
h1_words = $h1.text().split(' '); 
if (h1_words.length >= 2) { 
    h1_words[0] = '<span class="firstWord">'+h1_words[0]+'</span>'; 
    h1_words[1] = '<span class="secondWord">'+h1_words[1]+'</span>'; 
} 
$h1.html(h1_words.join(' ')); 

Answer 5

我的版本：

var parts = $('h1').text().split(' '); 
parts[0] = '<span class="firstWord">'+parts[0]+'</span>'; 
parts[1] = '<span class="secondWord">'+parts[1]+'</span>'; 
alert(parts.join(' ')); 

Answer 6

var str = $('h1').text().trim() 

var strArray = str.split(' '); 

var temp; 

for(var i=1;i<strArray.length;i++){ 
    temp += strArray[i]+" " 
} 

var result = '<span class='firstWord'>'+strArray[0]+'</span>'+" "+temp.trim() 

$('h1').text(result)