如何在一个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> 

它完全满足我的需求。 也许一些专家程序员可以更好地调整！