javascript - 使用正则表达式包含所有字符

Question

我对正则表达式不太熟悉，我正在尝试用纯 Javascript 解决问题。

我正在使用replace()将字符串剪切为单词(div)，然后将单词剪切为字母(span)，以分别为所有字母添加动画

但是使用下面的代码，只考虑字母。
我需要包含所有内容(字母数字、特殊字符……)

<p class="string">Hello! My name is John Do.</p>

.about-line {
 border: solid 2px blue; 
  display: inline-block;
}
.letter {
 border: solid 1px red;
}

var cutText = document.querySelector(".string");
cutText.innerHTML = cutText.textContent.replace(
  /\w+/g,
  (word) =>
    '<div class="about-line">' +
    word.replace(/./g, "<span class='letter'>$&</span>") +
    "</div>"
);

如有任何帮助，我们将不胜感激。
谢谢

Answer 1

您可以匹配 1 个或多个非空白字符 \S+ 来获取所有“单词”，然后仍然使用点来获取每个字符(因为其中只剩下非空白字符)匹配)

var cutText = document.querySelector(".string");
cutText.innerHTML = cutText.textContent.replace(
  /\S+/g,
  (word) =>
  '<div class="about-line">' +
  word.replace(/./g, "<span class='letter'>$&</span>") +
  "</div>"
);

.about-line {
  border: solid 2px blue;
  display: inline-block;
}

.letter {
  border: solid 1px red;
}

<p class="string">Hello! My name is John Do.</p>