用包含每个字符的 span 替换字符串答案

【问题标题】：Replace string with spans containing each character用包含每个字符的 span 替换字符串
【发布时间】：2019-09-10 01:58:33
【问题描述】：

我想用相同的链替换包含字符链的h1元素的内容，但每个字符都应该包含在一个跨度中强>.

这对我来说似乎很容易，但我可能低估了它。

这是我尝试过的（css 仅用于调试目的）：

var titleLen = $("#title").length - 1;
for (i=0; i<titleLen; i++) {
	letter = $("#title").charAt(i);
	$("#title").append("<span>" + letter + "</span>");
};

h1 span {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h1 id=title>
Hello World !
</h1>

它不工作，但我找不到问题。有什么帮助吗？

【问题讨论】：

标签： html string append

【解决方案1】：

您当前的代码不起作用的部分原因是您在 DOM 元素上而不是在其内容上调用 length 和 charAt - 但即使更正了您正在修改的内容迭代的每个步骤中的 div，因此第二个 charAt 最终会到达您刚刚插入的跨度的一部分，而不是原始字符串的第二个字符。（编辑：我刚刚意识到这个描述不太正确；你会在原始文本之后得到一个跨度包装的副本，因为你是追加而不是替换。）

以下是您可以使用原始算法的几种不同方式：

// keep a copy of the original string and work from that:
var title = $("#title").html();
$('#title').html('');
for (i = 0; i < title.length; i++) {
  letter = title.charAt(i);
  $("#title").append("<span>" + letter + "</span>");
};


// Alternatively, build a string and dump it into the DOM all at once:
/*
let output = '';
for (i = 0; i < $('#title').html().length; i++) {
  letter = $('#title').html().charAt(i);
  output +="<span>" + letter + "</span>";
};
$('#title').html(output);
*/

h1 span {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h1 id=title>
  Hello World !
</h1>

或者更简单的方法是将字符串拆分为每个字符的数组，然后使用 'join' 包含跨度标签：

$('#title').html(
  '<span>' + 
  $('#title').html().split('').join('</span><span>') +
  '</span>'
)

h1 span {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h1 id=title>
Hello World !
</h1>

【讨论】：