Javascript 用跨距替换文档中的特定字母

假设我有以下HTML代码

<div class="answers">
  He<b>y</b> <span class='doesntmatter'>eve</span>ryone
</div>

我想转换这段HTML代码，并用数组中的类为每个字母添加一个跨度（我将解释）

所以，我想把字母H转换成

H

e表示：

e

y表示：

y

e表示：

e

等等。我想确保保留原始HTML、

标记、

标记等。由于这个原因，我不能使用jQuery（element）.text（）（因为它会破坏标记）

有人知道我该怎么做吗？非常感谢。

这个怎么样：

jQuery需要改进，但它不是我的强项

HTML

<div class="numbers">123456789</div>

Jquery

$(".numbers").each(function (index) {

var characters = $(this).text().split("");

$this = $(this);
$this.empty();
$.each(characters, function (i, el) {

    $this.append("<span>" + el + "</span");  

});

$("span").each( function (index) {
      index += 1;

      if(index % 3 == 0) {
        $(this).addClass("incorrect");
      }
      else {
        $(this).addClass("correct");
      }
 });

});

$（“.number”）。每个（函数（索引）{
var characters=$（this.text（）.split（“”）；
$this=$（this）；
$this.empty（）；
$。每个（字符、函数（i、el）{
$this.append（“+el+”
var arr=['correct'、'correct'、'correct'、'correct'、'correct'、'correct'、'correct'、'correct'、'correct'、'correct'、'correct'、'correct']，
答案=document.getElementsByClassName（“答案”）[0]，
雷克斯＝/（？＝\W**）*（？）：你查看了.ReAPP（）方法吗？你可能想用不可仿射的Dave Rupert来检查，至少是窃取（相当简单）。代码。请阅读规则，您应该发布可复制的特定问题。这是一个代码请求。很好的尝试，但他明确指出答案中包含html。正如OP已经指出的那样，这将删除它。此外，您可以在一个
中完成它，而不是在两个（）中完成它。）
.correct { 
  color: red
}
.incorrect {
  color: blue;
}

$(".numbers").each(function (index) {

var characters = $(this).text().split("");

$this = $(this);
$this.empty();
$.each(characters, function (i, el) {

    $this.append("<span>" + el + "</span");  

});

$("span").each( function (index) {
      index += 1;

      if(index % 3 == 0) {
        $(this).addClass("incorrect");
      }
      else {
        $(this).addClass("correct");
      }
 });

});

var arr =  ['correct','correct','incorrect','correct','correct','correct','incorrect','incorrect','correct','correct','incorrect'],
    answer = document.getElementsByClassName("answers")[0],
    rex = /(?=\w|<)(?=[^>]*(?:<|$))/,
    i = 0, class;

answer.innerHTML = answer.innerHTML.split(rex).map(function(p) {
    if (p.indexOf('>')) return p;
    class = arr[i++] || 'notDefined';
    return '<span class="' + class + '">' + p + '</span>';
}).join('');