如何将转换添加到 unicode 字母

Question

我正在用我的语言制作一些文本动画。但是使用 js 将字母分隔为跨度，结果如下：

<span class="letter" style="transform: translate(0.55em, 1.1em) scale(1.5);">ध</span>
<span class="letter" style="transform: translate(0.55em, 1.1em);">्</span>
<span class="letter" style="transform: translate(0.55em, 1.1em);">य</span>
<span class="letter" style="transform: translate(0.55em, 1.1em);">ो</span>

我使用的脚本是

textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>"); 

html中的结果如下

结果应该是这样的：ध्यो，因为这些空格在 unicode 中组合在一起。

仅当 .letter 与应用转换所需的 display:inline-block 一起应用时才会中断。

有没有一种方法可以实现 ध्यो 的结果并且仍然对每个字母应用转换？

Answer 1

对于该语言，您必须用单词将它们分开，因为用字母分开是行不通的。以下代码应该可以工作。

        let textEl = document.querySelector("p");
        if (textEl) {
            let words = textEl.textContent.split(" ");
            let finalStr = words.reduce((accumulator, currentValue, currentIndex) => {
                return currentIndex === 1 ?
                    `<span class='word'>${accumulator}</span> <span class='word'>${currentValue}</span>` :
                    `${accumulator} <span class='word'>${currentValue}</span>`
                    ;
            });
            textEl.innerHTML = finalStr;
        }
        console.log(textEl.innerHTML);
        

<p>some text for testing</p>

Answer 2

删除空格 -

更新：我明白了，你不能做内联块

翻译仅适用于

块级或原子内联级元素，或其 'display' 属性计算为 'table-row'、'table-row-group'、'table-header-group'、'table-footer-group' 、“表格单元格”或“表格标题”[CSS21]

document.getElementById("letterDiv").innerText = document.getElementById("spanDiv").innerText;

.letter {
  transform: translate(0.55em, 1.1em) scale(1.5);
  color: green;
}

div.letter {
  position: absolute;
  top: 120px;
  left: 100px;
}

With whitespace<br/>
<span class="letter">ध</span>
<span class="letter">्</span>
<span class="letter">य</span>
<span class="letter">ो</span>
<hr/> Without

<br/>
<div id="spanDiv">
  <span class="letter">ध</span><span class="letter">्</span><span class="letter">य</span><span class="letter">ो</span>
</div>
<br/>
<hr/> Block
:<br/>

<div class="letter" id="letterDiv"></div>