jQuery - 如何将字符串中的每个字符包装在跨度中

Question

如何将 div 的字符转换为跨度？

例如，我想转换这个：

<div>
    Hello World
</div>

进入这个：

<div>
    <span>H</span>
    <span>e</span>
    <span>l</span>
    <span>l</span>
    <span>o</span>
    <span>W</span>
    <span>o</span>
    <span>r</span>
    <span>l</span>
    <span>d</span>
</div>

我已经尝试过这个 StackOverflow 建议，但是它将空格转换为跨度。我需要的是仅将字符转换为跨度：

$("div").each(function (index) {
    var characters = $(this).text().split("");

    $this = $(this);
    $this.empty();
    $.each(characters, function (i, el) {
        $this.append("<span>" + el + "</span");
    });
 });

Answer 1

您可以使用带有回调的String#replace方法和html()方法来减少代码。

$("div").html(function(index, html) {
  return html.replace(/\S/g, '<span>$&</span>');
});

$("div").html(function(index, html) {
  return html.replace(/\S/g, '<span>$&</span>');
});

$("div").html(function(index, html) {
  return html.replace(/\S/g, '<span>$&</span>');
});