如何将obj[item].coveredText中每个字符替换为独立span标签？

我来帮你搞定这个问题！你现在的代码是把整个目标字符串替换成单个span标签，要实现每个字符都包裹独立span，只需要调整目标字符串的处理逻辑就行，具体修改如下：

问题分析 #

原代码中newSpan是直接把整个str放进一个span里，所以替换后是单个span。我们需要先把str的每个字符都分别包裹成span，再用这个拼接后的结果去替换原文本中的目标字符串。

修改后的代码 #

var rangeRoot = $("#plainText");
// 定义正则转义函数，避免目标字符串中有特殊正则字符导致匹配出错
function escapeRegExp(string) {
  return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}

for (var item in obj) {
  var input = rangeRoot.html();
  var str = obj[item].coveredText;
  var type = obj[item].type;
  var level = obj[item].level;
  var id = obj[item].id;
  
  // 将每个字符单独包裹成span标签
  var charSpans = str.split('').map(char => {
    return `<span data-id="${id}" class="annotation level${level} ${type}">${char}</span>`;
  }).join('');
  
  var escapedStr = escapeRegExp(str);
  var regEx = new RegExp(escapedStr, "g");
  var output = input.replace(regEx, charSpans);
  
  rangeRoot.empty().append(output);
};

代码解释 #

1. 正则转义处理：escapeRegExp函数用来转义目标字符串中的特殊正则字符（比如.、*等），避免正则匹配出现意外错误。
2. 字符拆分与span拼接：用split('')把目标字符串拆分为单个字符的数组，再通过map为每个字符添加对应的span标签，最后用join('')拼接成完整的HTML片段。
3. 替换逻辑：使用转义后的目标字符串生成正则表达式，将原文本中的目标字符串替换为拼接好的多span片段。

示例验证 #

针对你给出的示例：

• 原文本：This is an example of an text
• 对象：{ "coveredText": "example", "type": "exampleType", "id": 4704, "level": 2 }

修改后的代码会生成如下输出（简化展示）：

This is an <span data-id="4704" class="annotation level2 exampleType">e</span><span data-id="4704" class="annotation level2 exampleType">x</span><span data-id="4704" class="annotation level2 exampleType">a</span><span data-id="4704" class="annotation level2 exampleType">m</span><span data-id="4704" class="annotation level2 exampleType">p</span><span data-id="4704" class="annotation level2 exampleType">l</span><span data-id="4704" class="annotation level2 exampleType">e</span> of an text

完全符合你的期望效果！

内容的提问来源于stack exchange，提问作者mm1975