使用html标记更改数组中元素，然后显示该数组

Question

我正在开发一个词频应用程序，在那里用户可以找到文本中最常用的单词，并更改该单词，并在HTML中显示整个文本的更改版本。

我创建了一个函数，你可以在修改后的单词周围创建一个span标签，这样我就可以给出一个类来添加一些CSS来突出显示它。

    const updatedTextArr = text.map(word => {
        const isSameWord = word === mostUsedWord
        if (isSameWord) {
            const spanNode = document.createElement("span")
            const alteredWord = `foo${mostUsedWord}bar`
            spanNode.append(alteredWord)
            word = spanNode
            return word
        } else {
            return word
        }
        const createString = updatedTextArr.join(" ").toString()
        setTextData(createString)
    })

但是通过这种方式，当我对它进行console.log时，返回的文本数组中更改过的单词显示为"HTML element“。

当我显示"createString“时，它在视图中显示与"HTML element”相同的更改过的单词。

我想知道在找到的最常用的单词中添加span标签的更好方法是什么？

Answer 1

使用Map和array.reduce可以解决这个问题。

​

const highlight = (text = "") => {
  const words = text.split(/\W/g);
  const wordMap = words.reduce((m, word) => {
    if (!m[word]) m[word] = 0;
    m[word] = (m[word] || 0) + 1;
    return m;
  }, {});
  let mostUsedWord = { count: 0, word: "" };
  for (let word in wordMap) {
    if (mostUsedWord.count < wordMap[word]) {
      mostUsedWord = { count: wordMap[word], word };
    }
  }
  return words.map(word => {
    if (word === mostUsedWord.word) {
      word = `<span class="highlighted">${word}</span>`;
    }
    return word;
  });
};

const createString = highlight(
  "This is a book of life. Which is never found in the jungle."
).join(" ");
console.log(createString);
document.getElementById("app").innerHTML = createString

.as-console-row {color: red!important}

.highlighted {color: red!important}

<div id="app"></div>

​

Answer 2

你的最后两行在函数内部，它们应该在外部。如果希望整个元素都是文本，可以使用outerHTML。此外，不需要else语句，因为您在任何情况下都会返回单词。

const updatedTextArr = text.map( word => {
    const isSameWord = word === mostUsedWord
    if ( isSameWord ) {
        const spanNode = document.createElement( "span" )
        const alteredWord = `foo${ mostUsedWord }bar`
        spanNode.append( alteredWord )
        word = spanNode.outerHTML
    }  
    return word
} )

const createString = updatedTextArr.join( " " ).toString()
setTextData( createString )

这将返回类似"one <span>footwobar</span> three"的内容(如果使用最多的单词是两个)。