ドットや括弧を含む正規表現がわかりません

Question

anime.js テキストアニメーションのサンプル
https://tobiasahlin.com/moving-letters/#1

上記を参考に文字が一文字づつ動くアニメーションを作成しています。
文字列の分割の処理をこのサンプルのまま実装すると、 . （ドット）や () （括弧）といった記号が無視されてしまいました。

$(this).html($(this).text().replace(/([^\x00-\x80]|\w)/g, "<span class='letter'>$&</span>"));

正規表現を使わずにやってみたところ、
半角スペースが詰まってしまいこれもNGでした。

const text = $(this).text().split('').map((letter) => {
  return `<span class="letter">${letter}</span>`;
}).join('');

半角スペースは残しつつ、記号も含めあらゆる文字にマッチする正規表現はありますでしょうか。
（半角スペースが削除されなければ正規表現でなくても問題ございません）

よろしくお願いいたします!

Comments

[otn]

「ある条件に合致する1文字をspanで囲む」というのが意図のようですが、
対象にしたい文字の条件を具体的に列挙してください。
また、やりたいことが「ある条件に合致する1文字をspanで囲む」だけではない場合にも具体的にそれを書いてください。

[machine_machine]

ご指摘ありがとうございます。
条件としましては、日本語キーボードで入力可能なすべての文字です。
それを一文字ずつ区切り span タグで囲みたいと考えています。

Answer 1

条件としましては、日本語キーボードで入力可能なすべての文字です。

が間違っていなくて、他にしたいことが無いので有れば、

$(this).html($(this).text().replace(/./g, "<span class='letter'>$&</span>"));

です。.で「(改行以外の)任意の1文字」にマッチします。

Answer 2

.letter {
  white-space: pre-wrap;
}

https://developer.mozilla.org/ja/docs/Web/CSS/white-space

後者と同じですが、すべての文字(改行除く)をひっかけるならこれでいいのでは？

/(.)/g

https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Regular_Expressions

Answer 3

サンプルがなぜ[^\x00-\x80]としているのか気になるところではありますが、要はスペース以外の文字を全て置換すればよいわけですから、こうでしょうか。

$(this).html($(this).text().replace(/([^\s])/g, "<span class='letter'>$&</span>"));

CodePenで確認したところ、うまく動作しました。

---

[^\x00-\x80]としている相応の理由があるならば、\wのあとにorで必要なぶんだけくっつけやればよいと思います。

$(this).html($(this).text().replace(/([^\x00-\x80]|\w|.|(|))/g, "<span class='letter'>$&</span>"));

Comments

[machine_machine]

お返事が遅くなってしまい失礼いたしました。
非常に簡潔にご説明いただきありがとうございます！望んだ結果を得られました。

Answer 4

記号も含めあらゆる文字

がどこまでなのかわからないのですが…

([^\x00-\x80]|\w|\W)はどうでしょうか。

↓のサイトで正規表現を試せるので、理想に合うまで考えてみてもよいかと。
Online regex tester and debugger: PHP, PCRE, Python, Golang and JavaScript

Answer 5

当てずっぽうですが、後者の方針で、半角スペースの場合だけ「 」に置換して出力するのはいかがでしょうか。

<span class="letter"> </span>が<span class="letter">&nbsp;</span>となれば詰まって見えなくなるのではないかと思ったので。