正则表达式匹配所有字符问题：纯JS实现文本拆分动画

问题出在你用来匹配“单词”的正则表达式/\w+/g——它仅能匹配字母、数字和下划线组成的序列，像!、.这类特殊字符会被排除在外。你需要把这个正则替换成/\S+/g，\S可以匹配任何非空白字符，这样所有连续的非空白内容（不管是不是特殊字符）都会被识别成“单词”，完整包裹进div.about-line里。

修改后的JavaScript代码如下：

var cutText = document.querySelector(".string");
cutText.innerHTML = cutText.textContent.replace(
  /\S+/g, // 替换为\S+匹配所有非空白字符序列
  (word) =>
    '<div class="about-line">' +
    word.replace(/./g, "<span class='letter'>$&</span>") +
    "</div>"
);

测试后你会发现，原文里的Hello!、Do.这类包含特殊字符的内容会被完整包裹进蓝色边框的div，每个字符（包括!、.）也会被红色边框的span单独包裹，完全满足你对所有字符添加动画的需求。原文本中的空白字符会保留在div之间，和原排版一致，无需额外调整。

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