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

【问题标题】：alter element in array with html tag, then display that array使用 html 标记更改数组中的元素，然后显示该数组
【发布时间】：2020-03-26 09:12:04
【问题描述】：

我正在开发一个词频应用程序，用户可以在其中找到文本中最常用的词并更改该词并在 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”时，它会在视图中显示与“HTML 元素”相同的更改后的单词。

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

【问题讨论】：

所以你从函数返回？最后两行将如何执行？
我可以在 sn-p 中看到无法访问的代码。

标签： javascript html reactjs

【解决方案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}

&lt;div id="app"&gt;&lt;/div&gt;

【讨论】：

【解决方案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" 的内容（如果最常用的单词是两个）。

【讨论】：