Javascript 通过给文本指定要突出显示的单词来突出显示文本

尝试传入单词并创建

标记，并将属性样式设置为黄色，基本上突出显示文本。我在

words.appendChild（newNode）上得到一个错误

有人知道我如何在设置的单词上创建带有样式的

标记吗

highlightText(words) {
  // words contains 4 different words.
  const newNode = document.createElement('a');
     newNode.setAttribute(
       'style',
       'background-color: yellow; display: inline;'
     );
     words.appendChild(newNode);
     // words.surroundContents(newNode);
}

在过去，这是我所做的，但这是使用

窗口。getSelection（）

highlightSelection（）{
this.complexword标识（this.postIWant，this.theHardWords）；
const userSelection=window.getSelection（）；
if（userSelection.toString（）==null）{
返回；
}否则{
for（设i=0；i

我希望能够执行与函数

highlightSelection（）

相同的操作，而是输入我想要的值，而不是手动高亮显示它

---

任何建议都将不胜感激

您可以尝试以下方法：

为了简单起见，我声明了常量。您也可以通过网络API调用引入单词，并将单词传递给

突出显示

方法

const words=['Lorem'，'ipsum']；
const getWords=async（）=>{
//在此处使用API调用或仅定义传入常量
突出显示（文字）；
}
常量突出显示=（单词）=>{
const high=document.getElementById（'highlight'）
const段落=high.innerHTML.split（“”）；
设res=[]；
段落.map（word=>{
让t=单词
if（words.indexOf（word）>-1）{
t=''+单词+''
}
res.push（t）
})
high.innerHTML=res.join（“”）
}
window.onload=getWords（）
.high{
背景颜色：黄色；
显示：内联；
右边距：5px；
}


Lorem ipsum dolor sit amet，奉献精英。临时选择权，不适用于国际公共部门类似的非流动性货物，不适用于连续的发明人。

您可以尝试以下方法：

为了简单起见，我声明了常量。您也可以通过网络API调用引入单词，并将单词传递给
突出显示
方法


const words=['Lorem'，'ipsum']；
const getWords=async（）=>{
//在此处使用API调用或仅定义传入常量
突出显示（文字）；
}
常量突出显示=（单词）=>{
const high=document.getElementById（'highlight'）
const段落=high.innerHTML.split（“”）；
设res=[]；
段落.map（word=>{
让t=单词
if（words.indexOf（word）>-1）{
t=''+单词+''
}
res.push（t）
})
high.innerHTML=res.join（“”）
}
window.onload=getWords（）
.high{
背景颜色：黄色；
显示：内联；
右边距：5px；
}


Lorem ipsum dolor sit amet，奉献精英。临时选择权，不适用于国际公共部门类似的非流动性货物，不适用于连续的发明人。

这里有一个小示例：）
您只需将它必须检查的根元素传递给函数，然后，它就是一个基本的
replace
函数


const words=['once'，'you']；
常量突出显示=（根，单词）=>{
words.forEach（word=>{
root.innerHTML=root.innerHTML.replace（word，word=>`${word}`）；
});
};
突出显示（document.querySelector（'.root'），单词）
。突出显示{
背景颜色：黄色；
}

让我们做一次简单的测试

你喜欢考试吗

这里有一个小示例：）
您只需将它必须检查的根元素传递给函数，然后，它就是一个基本的
replace
函数


const words=['once'，'you']；
常量突出显示=（根，单词）=>{
words.forEach（word=>{
root.innerHTML=root.innerHTML.replace（word，word=>`${word}`）；
});
};
突出显示（document.querySelector（'.root'），单词）
。突出显示{
背景颜色：黄色；
}

让我们做一次简单的测试

你喜欢考试吗

appendChild
是DOM节点上可用的函数，它似乎不适用于
words.appendChild（newNode）中的
words
。如何获取
单词
？它包含什么？要将字符串中的单词更改为html，请使用
string#replace（）
并返回html字符串。不清楚您作为
单词传递的内容。提供一个@MihaiT Yes，words是一个单词数组Yes，正如您在这里所说的，我需要将它们放入一个
中并设置样式。
appendChild
是DOM节点上可用的函数，它似乎不适用于
words.appendChild（newNode）中的
words
。如何获取
单词
？它包含什么？要将字符串中的单词更改为html，请使用
string#replace（）
并返回html字符串。不清楚您作为
单词传递的内容。提供一个@MihaiT Yes，words是一个单词数组Yes，正如您在这里所说的，我需要将它们放入一个
中并设置样式。这对Angular也适用吗？突出显示
（document.querySelector（'.root'），words）@Andrew是的，当然为什么不？这只是一个基本的JS函数，这里没有黑魔法！：）注意：它在HTML代码中搜索单词，所以一定不要在标记中使用它们。例如，如果在要突出显示的单词列表中设置一次
，
，则不要执行
。@Andrew或将词根设置为尽可能低的值，以确保不执行此操作
 highlightSelection() {
      this.complexWordIdentification(this.postIWant, this.theHardWords);
      const userSelection = window.getSelection();
      if (userSelection.toString() === null) {
         return;
      } else {
        for (let i = 0; i < userSelection.rangeCount; i++) {
            this.highlightRange(userSelection.getRangeAt(i));
            this.word = userSelection.toString();
        }
      }
    }


    highlightRange(range) {
        const newNode = document.createElement('a');
        newNode.setAttribute(
           'style',
           'background-color: yellow; display: inline;'
        ),
        range.surroundContents(newNode);
    }