Javascript拆分内部文本并用Span换行

我试图获取标题的内部文本，然后我想拆分字符，然后将每个字符包装在一个范围内。我以前尝试过使用insertBefore，但无法使其工作

这是我当前的代码，到目前为止，它只记录每个字符

// Title Split
const titleSplit = document.querySelectorAll('.title-split');

// Each El
Array.prototype.forEach.call(titleSplit, function(el, i) {

  let innerText = el.innerText;
  el.setAttribute('data-word', innerText);

  const chars = innerText.split('');

  Array.prototype.forEach.call(chars, function(el, i) {
    console.log(el);
  });
});

---

我特别不想要任何jQuery解决方案。我正在尝试反向学习Javascript以提高效率。任何建议都很好。我尝试在chars forEach中插入一个insertBefore，但它始终表示未定义。

文档。queryselectoral（…）

返回一个包含名为的方法的。所以不是

Array.prototype.forEach.call(titleSplit, function(el, i) {
   ...
}

你可以这么做

titleSplit.forEach(...);

chars.forEach(...);

同样，你也可以这样做

titleSplit.forEach(...);

chars.forEach(...);

因为

chars

是一个数组，您可以对数组调用

.forEach（）

方法

现在来回答你的问题，一旦你有了

chars

数组，你就可以使用方法而不是

.forEach（）

，来获得一个新的数组，其中每个字符都由

span

标记包装

const result = chars.map(c => `<span>${c}</span>`);

我使用了

document.body

作为所有

span

元素的父元素。您可以使用需要作为所有

span

元素的父元素的任何元素。

const myHeader=querySelector（'query my header please'）；
const myHeader = querySelector('query my header please');
const spans = myHeader.innerText
  .split('')
  .map((char) => `<span>${char}</span>`)
  .join('');

document.querySelector('query element to put them').innerHTML = spans;
// OR
document.querySelector('query element to put them').insertAdjacentHTML('beforeend', spans);
// etc.

const span=myHeader.innerText
.拆分（“”）
.map（（char）=>`${char}`）
.加入（“”）；
document.querySelector（'放置它们的查询元素'）.innerHTML=span；
//或
document.querySelector（'queryelement to put thes'）.insertAdjacentHTML（'beforeend'，span）；
//等等。

您可以在

forEach（）

循环中使用

map（）

来构造带有span的结果。另外，我建议您不要将

innerText

用作变量名，因为它是属性名，可能会导致一些混淆：

//标题拆分
const titleSplit=document.queryselectoral（'.title split'）；
//每个El
Array.prototype.forEach.call（titleSplit，function（el，i）{
设ElText=el.innerText；
el.setAttribute（'data-word'，ElText）；
常量字符=ElText.split（“”）；
var res=字符映射（函数（el，i）{
返回`${el}`；
}).加入（“”）；
el.innerHTML=res；
});
span{
边框：1px纯红；
填充：2px；
}
你好
向我们展示错误的原因，以及错误的确切内容。此外，您不需要劫持
Array.prototype.forEach
来迭代HTML元素；节点有自己的、本机的
forEach
（您可以将其直接链接到您的
querySelectorAll（）
调用。）Array.prototype.forEach.call发布HTML和预期结果真的会伤到我的眼睛吗？您提到要拆分/包装字符，是指单词吗？