如何在含HTML标签的字符串中每12个非标签字符后添加换行

你的核心问题是之前的实现仅在单个<span>标签内独立计数，无法跨标签累计非标签字符。可以利用正则表达式结合replace的回调函数，全局遍历字符串并维护累计计数，实现需求：

let messageString = '<span>This is a text.</span><span>Lets go for the walk now.</span>';
let charCount = 0;

const result = messageString.replace(/(<[^>]+>)|([^<>])/g, (match, tag, char) => {
    // 匹配到HTML标签，直接返回原标签
    if (tag) {
        return tag;
    }
    // 非标签字符，累计计数
    charCount++;
    // 每第12个非标签字符后添加换行符
    return char + (charCount % 12 === 0 ? '\n' : '');
});

console.log(result);

代码说明 #

1. 正则匹配逻辑：

   • <[^>]+>：匹配完整的HTML标签（从<开头到>结尾，中间不含>）
   • [^<>]：匹配单个非标签字符（排除<和>）
   • 全局标志g确保遍历整个字符串的所有匹配项

2. 回调函数处理：

   • 若匹配到标签，直接返回原标签，不参与计数
   • 若匹配到非标签字符，先累计计数，当计数为12的倍数时，在字符后追加换行符，否则返回原字符

这种方式无需手动循环，通过正则的全局替换和回调计数，自然实现跨标签的非标签字符累计统计，完全符合你的需求。

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