如何在span标记中包含元素的每个单词？
$("div.date") .contents() .filter( function(){ return this.nodeType != 1; }) .wrap(""); 我是新手，并且认为代码可以完成这个技巧，但它包含了中的所有内容，如下所示：
它应该看起来像这样：
Dec 22, 2011
它会比那复杂一点。 你将不得不找出所有的单词并将它们重新附加到你的元素中，包裹在一个跨度中。
var words = $("p").text().split(" "); $("p").empty(); $.each(words, function(i, v) { $("p").append($("").text(v)); });
实例
这个简单的任务你不需要 jQuery。 String.prototype.replace和regex应该可以解决这个问题。
我刚刚制作了一些简单的实用函数，包括字母，单词和行：
/** * 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 || "$&"); } /** * 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 || "$&"); } /** * 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 || "$&"); }
用法非常简单。 只需传入字符串作为第一个参数包装。 如果需要自定义标记，请将其作为第二个参数传入，而$&替换为每个char / word /行。
var str = "Foo isn't equal\nto bar."; wrapChars(str); // => "Foo isn't equal to bar." wrapWords(str); // => "Foo isn't equal to bar." wrapLines(str); // => "Foo isn't equal to bar."
var $div = $('.words'); var divWords = $div.text().split(/\s+/); $div.empty(); $.each(divWords, function(i,w){ $('').text(w).appendTo($div); });
然后
Why hello there, world!
变
Why hello there, World!
这是你想要实现的目标吗？
Dec 22, 2011
如果是这样：
$('div.date').wrap('');
或者你想要得到这个：
Dec 22, 2011
像这样的东西可以做到这一点：
var dateInner = $('div.date'); var wraps = []; $.each(dateInner.text().split(' '), function (key, value) { wraps.push = '' + value + ''; }); dateInner.html(wraps.join(''));
如果你使用jQuery，试试这个 。
具体来说，您可以在此处找到如何拆分为单词的示例
引用：
这是.lettering（’words’）方法的一个例子：
Don't break my heart.
这会产生：
Don't break my heart.
我需要给每个单词一个特定的id，所以，作为一个新手，我研究了之前发布的答案代码。 从Brad Christie和Daniel 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($(" ").addClass("myclass_" + index).text(words[index])); } })
哪个输出：
bla bla bla
从…开始：
bla bla bla
它完全符合我的需求。 也许一些专家程序员可以更好地调整它！
如果元素内容包含子元素（HTML），则上述解决方案无用。
这是我提出的一个保留HTML（元素及其属性）的jsfiddle。 这个小片段的缺点是，如果你有事件绑定到元素的内容，那么它们将丢失，因为innerHTML被重新分配给其他东西。
此代码不需要任何特殊库（如jQuery）。
https://jsfiddle.net/4b5j0wjo/3/
var e = document.getElementById('words'); e.innerHTML = e.innerHTML.replace(/(^|<\/?[^>]+>|\s+)([^\s<]+)/g, '$1$2');
只是建立在Xeon06上的优秀答案。
我必须在同一页面上为同一元素的多个执行此操作。
$('.element').each(function(){ var words = $(this).text().split(" "); var total = words.length; $(this).empty(); for (index = 0; index < total; index ++){ $(this).append($(" ").text(words[index])); } })