使用 jQuery/Javascript 用 HTML 标签包裹字符串的每个字母

Question

我需要能够获取一串文本并用 HTML 标签将每个字母包裹在该字符串中，例如

<i>

或

<span>

（暂时不重要）。

到目前为止，我已经做到了，但它还没有完全按照我的需要工作。

我遇到的问题是我不希望替换或更改字符串中当前的任何

<span>

标签。如果字符串中已经存在

<span>

，那么它应该保留它已经拥有的任何类，或者应该将“test_new”类添加到已经存在的类“test”中。

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

span {
   border: 1px solid red;
}

span.test {
    border: 1px solid blue;
}

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

<p>This is a <span class="test">test</span> string</p>

基本上在代码运行后，

<span>

应该是蓝色的，这意味着

<span>

在字符串转换后保留了任何原始类。

任何帮助将不胜感激，谢谢！

Answer 1

首先你需要过滤掉只获取文本节点。为了防止换行空格（代码缩进），您可能也想对其进行过滤。在 jQuery 的过滤器函数中，您可以做到这一点，正如您在下面的示例中看到的那样。

我做了一个函数，用你的span标签包裹文本的每个字母。

通过循环每个文本节点并使用replaceWith jQuery函数和我们新创建的wrapChars函数，您可以包装所有文本节点的所有字符。

$('p').contents()
      .filter((i, n) => n.nodeType === Node.TEXT_NODE && n.nodeValue.trim() !== "")
      .each((i, el) => $(el).replaceWith(wrapChars($(el).text())));

function wrapChars(text) {
  return [...text].map((c) => `<span class="test_new">${c}</span>`).join('');
}

span.test_new {
    border: 1px solid red;
}

span.test {
    border: 1px solid blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>This is a <span class="test">test</span> string</p>