如何将元素的每个单词包装在 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

您不需要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 || "<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 2

它会比那更复杂一点。 您将不得不找出所有单词并将它们重新附加到您的元素中，包裹在一个跨度中。

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

活生生的例子

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>');

Answer 4

我需要给每个单词一个特定的 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($("<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>

它非常适合我的需求。 也许一些专家程序员可以更好地调整它！

Answer 5

经过大量研究，我能够通过使用正则表达式的负后视功能安全地做到这一点。

htmlStr.replace(/(?<!(<\/?[^>]*|&[^;]*))([^\s<]+)/g, '$1<span class="word">$2</span>')

Answer 6

这是你想要达到的目标吗？

<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 7

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 8

如果你使用 jQuery，试试这个。

具体来说，您可以在此处找到如何拆分为单词的示例

引用：

下面是 .lettering('words') 方法的一个例子：

 <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 9

只是建立在 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 10

如果您想要每个单词，这是一个简单的单行答案：

str.split(' ').replace(/\w+/g,"<span>$&</span>").join(' ');