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

【问题标题】：jQuery - How to wrap each character from a string in spansjQuery - 如何将字符串中的每个字符包装在跨度中
【发布时间】：2016-12-13 07:06:19
【问题描述】：

如何将 div 的字符转换为 span？

例如，我想转换这个：

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

我尝试过this StackOverflow suggestion，但这会将空格转换为跨度。我需要的是仅将字符转换为跨度：

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

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

【问题讨论】：

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

标签： javascript jquery

【解决方案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>');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  Hello World
</div>

【讨论】：

【解决方案2】：

你可以试试这个简单的JavaScript。

(function() {
  var div, i, span = "";
  div = document.querySelectorAll("div")[0];
  for (i = 0; i < div.innerText.length; i++) {
    if (div.innerText[i] !== " ") {
      span += "<span>";
      span += div.innerText[i];
      span += "</span>";
    }
  }
  div.innerHTML = span;
}());

<div>
  Hello World
</div>

【讨论】：

【解决方案3】：

我更喜欢使用正则表达式：

var txt = $('#container').text();
var newTxt = txt.replace(/\w/g,function(c){
  return '<span>'+c+'</span>';
})
$('#container').html(newTxt);

span {
  display:inline-block;
  background-color:#dfdfdf;
  color:#aaa;
  padding:3px;
  margin:3px;
  border-radius:3px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
    Hello World
</div>

【讨论】：

我想知道函数（c）的含义是什么字符（c）的目标
@MoHamedHaSsn c 这里是正则表达式匹配的字符串，即\w，表示字母数字和下划线字符。
developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

【解决方案4】：

var textWrapper = document.querySelector('h1');
textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");

&lt;h1&gt;Hello world&lt;/h1&gt;

【讨论】：

【解决方案5】：

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

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

为空间设置条件

【讨论】：

【解决方案6】：

尝试：

$("div").each(function (index) {
  var characters = $(this).text().split("");
  characters = characters.filter(v => v != '');
  $(this).empty();
  for(var i =0; i < characters.length; i++) {
      $(this).append("<span>" + characters[i] + "</span");
  }    
});

【讨论】：

【解决方案7】：

尽量少写

html

<div>
    HelloWorld
</div>

js

var d=$("div");
var text=d.text();
text=$.trim(text);
d.empty();

for(i=0;i<text.length;i++){
    var span=$("<span></span>");
    span.text(text[i]);
    d.append(span)
}

【讨论】：