JS实现文本字符拆分并为每个字符添加对应位置的动态类名

方案1：使用replace回调函数（推荐，和原实现逻辑兼容性最高） #

你可以直接通过给replace方法传入回调函数实现需求，不需要更换其他实现方案，具体修改如下：

var textWrapper = document.getElementById("heading");
// 初始化字符计数器，从0开始，第一次匹配后+1刚好对应1起始的序号
let matchCount = 0;
textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, (matchedChar) => {
  matchCount++;
  return `<span class='letter-${matchCount}'>${matchedChar}</span>`;
});

效果说明 #

针对你给出的<h1> Hello! </h1>输入，最终输出的innerHTML为：

<span class='letter-1'>H</span><span class='letter-2'>e</span><span class='letter-3'>l</span><span class='letter-4'>l</span><span class='letter-5'>o</span><span class='letter-6'>!</span> 

完全匹配你要的letter-1到letter-n的序号规则，序号仅统计非空白字符的出现顺序，和你原有正则的匹配逻辑一致。

方案2：遍历字符数组实现（适合需要自定义更多字符处理逻辑的场景） #

如果你后续需要对字符做更多自定义判断，也可以把文本内容拆分为数组遍历处理：

var textWrapper = document.getElementById("heading");
const rawText = textWrapper.textContent;
let htmlStr = '';
let letterCount = 0;
for (let char of rawText) {
  // 非空白字符包裹带序号的span
  if (/\S/.test(char)) {
    letterCount++;
    htmlStr += `<span class="letter-${letterCount}">${char}</span>`;
    continue;
  }
  // 空白字符直接保留
  htmlStr += char;
}
textWrapper.innerHTML = htmlStr;

该方案的输出和方案1完全一致。

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