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

Question

I need to extract some words from a string of text, insert every character of that words inside a span element and then replace the extracted words with the span elements. I have been able to convert characters into span elements but I can't figure out how to replace the extracted words with the span elements without deleting the other words.

<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>]

Now, what I'd like to do is this:

<!-- 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>

How could I replace the extracted words with the generated spans keeping the other words where they are?

Answer 1

Here is one way to do it:

 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>

Instead of . filter() . filter() -ing I use .map() to go through every word. Inside the callback function I check with .some() relative to some beginsArr whether the current word starts with one of the characters in question. If so, I "spanify" the word otherwise I return the word as is. At the end I stitch everything together again with .join() .