使用DOM在字母中分割单词的最佳方法

Question

我有以下结构。

<div class="container">
  <span>word</span>
  <span>word2</span>
  <span>word3</span>
</div>

我希望输出为：

<span><b>w</b><b>o</b><b>r</b><b>d</b></span>

为实现这一点，我使用以下代码：

let containers = document.querySelectorAll('.container');

Array.from(containers, x => {       
    Array.from(x.children, y => {    

        let text = y.innerText;
        y.innerHTML = '';

        for(let c of text) {
            y.innerHTML += `<b>${c}</b>`;
        }           
    });
});

但我真的不喜欢我需要清除HTML然后附加字母包装。

有人知道更好的解决方案吗？

http://jsbin.com/rexaqis/edit?html,css,js,output

Answer 1

试试这个：

y.innerHTML = y.innerHTML.split('').map(function(element){
    return '<b>' + element + '</b>';
}).join('');