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，但它一直在说undefined。

Answer 1

document.querySelectorAll(...)返回一个包含名为.forEach()的方法的NodeList。所以不是

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

您可以在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>

Answer 3

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.