Javascript拆分innerText并用Span包裹

Question

我正在尝试获取标题的内部文本，然后我想拆分字符，然后将每个字符包装在一个跨度中。 我以前尝试过使用 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 以提高效率。 任何建议都会很棒。 我尝试在字符 forEach 中插入一个 insertBefore，但它一直说未定义。

Answer 1

document.querySelectorAll(...)返回一个NodeList ，其中包含一个名为.forEach()的方法。 所以代替

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

你可以做

titleSplit.forEach(...);

同样，你可以做

chars.forEach(...);

因为chars是一个数组，您可以在数组上调用.forEach()方法。

现在来回答你的问题，一旦你有了chars数组，你就可以使用.map()方法而不是.forEach()来获取一个包含字符串的新数组，其中每个字符都被span标签包裹。

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

最后，您需要遍历result数组并将其元素插入到DOM 。

result.forEach(el => document.body.append(el));

我使用document.body作为所有span元素的父元素。 您可以使用任何需要成为所有span元素的父元素的元素。

Answer 2

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.

Answer 3

您可以在forEach()循环中使用map()来构造具有 span 的结果。 此外，我建议您不要使用innerText作为变量名称，因为它是属性名称，这可能会导致一些混淆：

 // Title Split const titleSplit = document.querySelectorAll('.title-split'); // Each El Array.prototype.forEach.call(titleSplit, function(el, i) { let ElText = el.innerText; el.setAttribute('data-word', ElText); const chars = ElText.split(''); var res = chars.map(function(el, i) { return `<span>${el}</span>`; }).join(''); el.innerHTML = res; });

 span{ border: 1px solid red; padding: 2px; }

 <div class="title-split">Hello there</div>