javascript - 使用 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元素”

当我显示“createString”时，它会显示与 View 中的“HTML 元素”相同的更改后的单词。

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

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>