https://www.mikamotanakahp.jp/js/split2.js?1791193405

1class SpanWrap {
2  constructor() {
3    this.settings = {
4      target: ".js-span-text"
5    }
6    this.targets = "";
7    this.targetLength = 0;
8    this.nodes = [];
9    this.convertContents = [];
10  }
11
12  init(options) {
13    this.setup(options);
14    this.getNodes();
15    this.convert();
16    this.set();
17  }
18
19  setup(options) {
20    this.settings = Object.assign({
21      target: this.settings.target
22    }, options || {});
23    this.targets = document.querySelectorAll(this.settings.target);
24    this.targetLength = this.targets.length;
25  }
26
27  getNodes() {
28    for (let target of this.targets) {
29      let nodes = target.childNodes;
30      this.nodes.push(nodes);
31    }
32  }
33  
34  convert() {
35    for (let i = 0; i < this.targetLength; i++) {
36      this.convertContents.push([]);//カラの配列を追加
37      for (let node of this.nodes[i]) {
38        if (node.nodeType == 3) {//テキストの場合
39          let text = node.textContent.replace(/\s+/g, '');//テキストから空白削除
40          text.split('').forEach((v) => {
41            this.convertContents[i].push("<span>" + v + "</span>");
42          });
43
44        } else {//テキスト以外
45          this.convertContents[i].push(node.outerHTML);
46        }
47      }
48    }
49  }
50
51  set() {
52    for (let i = 0; i < this.targetLength; i++) {
53      this.targets[i].innerHTML = this.convertContents[i].join("");
54    }
55  }
56
57}
58
59const spanWrap = new SpanWrap();
60spanWrap.init();