如何将多个数组项添加为 HTML 内容？

Question

我需要从文本字符串中提取一些单词，将这些单词的每个字符插入到 span 元素中，然后用 span 元素替换提取的单词。我已经能够将字符转换为 span 元素，但我不知道如何在不删除其他词的情况下用 span 元素替换提取的词。

<h1 class="title">Lorem ipsum dolor sit amet</h1>

const title = document.querySelector('.title');

// Extract required words and split them into single character
const firstWord = title.textContent.split(' ').filter(wrd => wrd.startsWith('L')).toString().split('');
const secondWord = title.textContent.split(' ').filter(wrd => wrd.startsWith('a')).toString().split('');

// Return a new array with every character inside a span element
const spanCharacters = arr => {
    return arr.map(char => {
        const span = document.createElement('span');
        span.textContent = char;
        return span;
    });
};

const spanFirstWord = spanCharacters(firstWord);
// return [<span>L</span>, <span>o</span>, <span>r</span>, <span>e</span>, <span>m</span>]

const spanSecondWord = spanCharacters(secondWord);
// return [<span>a</span>, <span>m</span>, <span>e</span>, <span>t</span>]

现在，我想做的是：

<!-- before -->
<h1 class="title">Lorem ipsum dolor sit amet</h1>

<!-- after -->
<h1 class="title"><span>L</span><span>o</span><span>r</span><span>e</span><span>m</span> ipsum dolor sit <span>a</span><span>m</span><span>e</span><span>t</span></h1>

我如何用生成的跨度替换提取的单词，同时保持其他单词在原处？

Answer 1

这是一种方法：

const ttl=document.querySelector("h1.title"),
      txt=ttl.textContent;

function spanifyWords(beginsArr,txt){
 return txt.split(" ").map(w=>{
  if (beginsArr.some(b=>w.startsWith(b))) 
    w="<span>"+w.split("").join("</span><span>")+"</span>";
  return w
 }).join(" ");
}

ttl.innerHTML=spanifyWords(["a","L"],txt);

span {color: green; border:1px solid red}

<h1 class="title">Lorem ipsum dolor sit amet</h1>

而不是 . filter()-ing 我使用 .map() 来检查每个单词。在回调函数中，我使用 .some() 相对于某些 beginsArr 检查当前单词是否以相关字符之一开头。如果是这样，我“展开”这个词，否则我return这个词是。最后，我用 .join().

再次将所有内容拼接在一起

如何将多个数组项添加为 HTML 内容？

How to add multiple array items as HTML content?

html

javascript

arrays