如何在一個span標籤中包裝一個元素的每個單詞？

Question

$("div.date") 
    .contents() 
    .filter(
     function(){ 
      return this.nodeType != 1; 
     }) 
    .wrap("<span/>"); 

我是新的，並認爲該代碼會做的伎倆，但在包裝的一切<span>像這樣：

<div class='date'><span> 2011年12月22日</span></div>

它應該是這個樣子：

<div class='date'> 
    <span>Dec</span> 
    <span>22,</span> 
    <span>2011</span> 
</div> 

Answer 1

這會是比這更復雜一點。你將不得不找出所有的單詞，並將它們重新添加到你的元素中，並以一個跨度包裹起來。

var words = $("p").text().split(" "); 
$("p").empty(); 
$.each(words, function(i, v) { 
    $("p").append($("<span>").text(v)); 
}); 

Live example

Answer 2

這是你想要實現的嗎？

<span><div class="date">Dec 22, 2011</div></span> 

如果是這樣的：

$('div.date').wrap('<span/>'); 

或者，你試圖讓這個：

<span>Dec</span> <span>22,</span> <span>2011</span> 

事情是這樣的建議立即進行刪除這樣的伎倆：

var dateInner = $('div.date'); 
var wraps = []; 
$.each(dateInner.text().split(' '), function (key, value) { 
    wraps.push = '<span>' + value + '</span>'; 
}); 

dateInner.html(wraps.join('')); 

Answer 3

var $div = $('.words'); 
var divWords = $div.text().split(/\s+/); 
$div.empty(); 
$.each(divWords, function(i,w){ 
    $('<span/>').text(w).appendTo($div); 
}); 

然後

<div class="words">Why hello there, world!</div> 

成爲

<div class="words"> 
    <span>Why</span> 
    <span>hello</span> 
    <span>there,</span> 
    <span>World!</span> 
</div> 

Answer 4

你不需要 jQuery的這個簡單的任務。 String.prototype.replace和正則表達式應該做的伎倆。

我只是做了一些簡單實用的功能，它包裝的字母，單詞和行：

/** 
* Wraps a string around each character/letter 
* 
* @param {string} str The string to transform 
* @param {string} tmpl Template that gets interpolated 
* @returns {string} The given input as splitted by chars/letters 
*/ 
function wrapChars(str, tmpl) { 
    return str.replace(/\w/g, tmpl || "<span>$&</span>"); 
} 

/** 
* Wraps a string around each word 
* 
* @param {string} str The string to transform 
* @param {string} tmpl Template that gets interpolated 
* @returns {string} The given input splitted by words 
*/ 
function wrapWords(str, tmpl) { 
    return str.replace(/\w+/g, tmpl || "<span>$&</span>"); 
} 

/** 
* Wraps a string around each line 
* 
* @param {string} str The string to transform 
* @param {string} tmpl Template that gets interpolated 
* @returns {string} The given input splitted by lines 
*/ 
function wrapLines(str, tmpl) { 
    return str.replace(/.+$/gm, tmpl || "<span>$&</span>"); 
} 

的使用是非常簡單的。只需傳入字符串以包裝爲第一個參數即可。如果您需要自定義標記，請將其作爲第二個參數傳入，而$&由每個字符/字/行代替。

var str = "Foo isn't equal\nto bar."; 
wrapChars(str); // => "<span>F</span><span>o</span><span>o</span> <span>i</span><span>s</span><span>n</span>'<span>t</span> <span>e</span><span>q</span><span>u</span><span>a</span><span>l</span> <span>t</span><span>o</span> <span>b</span><span>a</span><span>r</span>." 
wrapWords(str); // => "<span>Foo</span> <span>isn</span>'<span>t</span> <span>equal</span> <span>to</span> <span>bar</span>." 
wrapLines(str); // => "<span>Foo isn't equal</span> <span>to bar.</span>" 

Answer 5

只是建立在Xeon06優秀的答案。

我必須爲同一頁面上的多個相同元素執行此操作。

$('.element').each(function(){ 
     var words = $(this).text().split(" "); 
     var total = words.length; 
     $(this).empty(); 
     for (index = 0; index < total; index ++){ 
      $(this).append($("<span /> ").text(words[index])); 
     } 
    }) 

Answer 6

如果您使用jQuery，請嘗試this。

具體來說，你可以找到如何分割單詞here

引用的例子：

這裏的一個例子。刻字（「字」）方法：

<p class="word_split">Don't break my heart.</p> 

<script> 
$(document).ready(function() { 
    $(".word_split").lettering('words'); 
}); 
</script> 

這將產生：

<p class="word_split"> 
    <span class="word1">Don't</span> 
    <span class="word2">break</span> 
    <span class="word3">my</span> 
    <span class="word4">heart.</span> 
</p> 

Answer 7

我需要給每個單詞一個特定的ID，所以，作爲一個新手，我研究了此前公佈的答案碼。從布拉德·克里斯蒂和丹尼爾TONON的代碼開始，我用.addClass實現這一結果：

$('.mydiv').each(function(){ 
    var words = $(this).text().split(/\s+/); 
    var total = words.length; 
    $(this).empty(); 
    for (index = 0; index < total; index ++){ 
     $(this).append($("<span /> ").addClass("myclass_" + index).text(words[index])); 
     } 
    }) 

，輸出：

<div class="mydiv"> 
     <span class="myclass_0">bla</span> 
     <span class="myclass_1">bla</span> 
     <span class="myclass_2">bla</span> 
    </div> 

起價：

<div class="mydiv">bla bla bla</div> 

它完全滿足我的需求。 也許一些專家程序員可以更好地調整！