如何在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));
});

实例

Answer 2

这个简单的任务你不需要 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 3

如果您的元素内容包含子元素 (HTML)，则上述解决方案没有用。

这是我提出的一个 jsfiddle，它保留了 HTML（元素及其属性）。这个小片段的缺点是，如果您将事件绑定到元素的内容，那么它们将丢失，因为 innerHTML 被重新分配给其他内容。

此代码不需要任何特殊库（如 jQuery）。

https://jsfiddle.net/4b5j0wjo/3/

var e = document.getElementById('words');
e.innerHTML = e.innerHTML.replace(/(^|<\/?[^>]+>|\s+)([^\s<]+)/g, '$1<span class="word">$2</span>');