Javascript 文本突出显示（从头开始）输出问题

我正在尝试构建一个简单的彩色荧光灯，使用一个textarea在keyup上调用一个函数，并使用一个div输出结果（高亮显示/彩色文本）

要高亮显示的单词及其相关颜色存储在此对象中：

var obj = {
  "to": "green",
  "code": "red",
  "applet": "blue"
}

然后将输入字符串拆分为单词单位，以检查它们是否与

obj

键匹配

var splitRequest = input.value.toLowerCase().split(' ');

如果有，则应突出显示。我编写了一个简单的代码来实现这一点（见末尾的fiddle），除了这一行：

output.innerHTML += '<span style="color:' + obj[splitRequest[i]] + '">' + splitRequest[i] + " </span>";

output.innerHTML+=''+splitRequest[i]+''；

它在每个按键上打印整个文本，而不是用新内容替换当前内容，因为有

+=

符号。问题是我不能简单地使用

=

符号，因为它只打印

splitRequest

数组的第一个元素，而不是整个数组。我尝试使用

join（）

方法，但显然没有达到预期效果（）

也许代码本身不是很好，我应该使用另一种方法来让它工作。这将是一个更好地学习javascript的好方法，但我实际上不知道如何做到这一点

如何在突出显示匹配单词的同时输出用户键入的文本而不出现此问题

下面是我遇到的工作演示：

谢谢你的帮助

PS：我知道有第三方可用于语法突出显示，但为了教育自己，我尝试使用纯javascript（无jQuery）从头开始编写代码。

add

output.innerHTML=”“

之后

var output=document.getElementById（'output'）

第9行

这里有一个可行的解决方案

var obj = {
    "to": "green",
    "code": "red",
    "applet": "blue"
}

function highlight() {
    var input = document.getElementById('input');
    var output = document.getElementById('output'),
        pattern = /\s+(to|code|applet)(?=\s+)/gi;

    output.innerHTML = input.value.replace(pattern, function (x) {
       return "<span style=\"color:" + obj[x.toLowerCase().trim()] +
           "\"> " + x + "</span>" });
}

var obj={
“至”：“绿色”，
“代码”：“红色”，
“小程序”：“蓝色”
}
函数高亮显示（）{
var input=document.getElementById（'input'）；
var output=document.getElementById（'output'），
模式=/\s+（到|代码|小程序）（？=\s+）/gi；
output.innerHTML=input.value.replace（模式，函数（x）{
返回“+x+”}）；
}
您可以使用这个。
var obj={
“至”：“绿色”，
“代码”：“红色”，
“小程序”：“蓝色”
}

    props = [];
    for (var p in obj) {
        props.push(p);
    }
    var pat = new RegExp("\\s+(" + props.join("|") + ")(?=\\s+)", "gi");
    alert(pat);
    function highlight() {
        var input = document.getElementById('input');
        var output = document.getElementById('output');
        output.innerHTML = input.value.replace(pat, function (x) { return "<span style=\"color:" + obj[x.toLowerCase().trim()] + "\"> " + x + "</span>" });

    }

props=[]；
用于（obj中的var p）{
道具推（p）；
}
var pat=new RegExp（“\\s+”（“+props.join（“|”）+”）（=\\s+”，“gi”）；
警惕（pat）；
函数高亮显示（）{
var input=document.getElementById（'input'）；
var output=document.getElementById（'output'）；
output.innerHTML=input.value.replace（pat，函数（x）{return'+x+'}）；
}
这里是一个使用map/reduce和字符串模板的ES2015/ES6样式示例


“严格使用”
常量对象={
“至”：“绿色”，
“代码”：“红色”，
“小程序”：“蓝色”
}
const output=document.getElementById（'output'））
document.getElementById（'input'）
.addEventListener（'keyup'，高亮显示）
/**
*处理文本并在输出控件中提供该文本
*/
函数高亮显示（）{
output.innerHTML=processText（input.value.toLowerCase（））
}
/**
*处理文本并返回要显示的格式化HTML文本
*
*@param{string}text-要处理的文本
*@return{string}格式的HTML文本
*/
函数processText（文本）{
返回文本。拆分（“”）
.map（x=>obj[x]？`${x}`:x）
.reduce（（prev，cur）=>`${prev}${cur}`）
}
/**
*触发第一次强光功能
*因此，如果输入控件中有任何文本，它将突出显示文本
*/
突出显示（）
textarea{
填充：10px；
}
div{
宽度：235px；
高度：80px；
边框：1px纯黑；
填充：10px；
溢出：自动；
颜色：黑色；
}
编码或不编码此小程序
已删除
标记。你不应该再使用它了。将其替换为：
…
哦，我的上帝。。。我aleady尝试了这个，但添加到了错误的行中（在for循环中）。现在很好用，谢谢！没问题。很多最困难的bug都是由最简单的事情引起的——这就是为什么它们有一个很好的答案，我只是想在我的代码中使用regExp。有没有办法让模式使用变量而不是预定义的键来动态匹配对象属性？类似于（obj中的var-prop）{pattern=/\s+（/+prop+/）（？=\s+/gi；}
而不是
（to | code | applet）
的东西会很好。我很难找到正确的语法，因为我还不太熟悉RegExp