如何使用JavaScript更改字符串中特定字符的颜色？

我正在使用以下代码使用表搜索功能- . 当用户使用一些搜索字符（如“Jac”）搜索任何行数据时，我只想更改这3个字符的颜色，并显示整行。如何更改这3个字符的颜色？还是搜索输入字符？ 编辑-我的代码是：

$("#searchBox").keyup(function() {
var input, filter, table, tr, td, i;
input = document.getElementById("searchBox");
filter = input.value.toUpperCase();
if (filter.length > 1) {
    table = document.getElementById("myTable");
    tr = table.getElementsByTagName("tr");

    for (i = 0; i < tr.length; i++) {
        td = tr[i].getElementsByTagName("td")[1];
        if (td) {
            if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {

                var regx = new RegExp(filter, "g");
                var newstring = td.innerHTML.replace(regx, '<span class="highlight">' + filter + '</span>');
                td.innerHTML = newstring;
                tr[i].style.display = "";
            } else {
                tr[i].style.display = "none";
            }
        }
    }
} else {
    table = document.getElementById("myTable");
    tr = table.getElementsByTagName("tr");
    for (i = 0; i < tr.length; i++) {
        tr[i].style.display = "";
    }
}

$（“#搜索框”）.keyup（函数（）{
var输入、过滤器、表格、tr、td、i；
输入=document.getElementById（“搜索框”）；
filter=input.value.toUpperCase（）；
如果（filter.length>1）{
table=document.getElementById（“myTable”）；
tr=table.getElementsByTagName（“tr”）；
对于（i=0；i-1）{
var regx=新的RegExp（过滤器，“g”）；
var newstring=td.innerHTML.replace（regx，“+filter+”）；
td.innerHTML=新闻字符串；
tr[i].style.display=“”；
}否则{
tr[i].style.display=“无”；
}
}
}
}否则{
table=document.getElementById（“myTable”）；
tr=table.getElementsByTagName（“tr”）；
对于（i=0；i

}))

上述代码的输出不正确。仅当搜索字符串的长度大于1时，它才起作用。如果输入3个字符，则失败。

捕获搜索短语（您正在搜索或查找的单词）。捕获搜索区域（正在搜索的表格或段落）。查看搜索区域，看看是否可以找到搜索短语。一旦它存在，替换为一个字符串，该字符串周围有一个HTML元素标记

用相同的词替换搜索到的词，但将其包装在具有特定CSS类的范围内。使用CSS定制外观

var-toLookInto=$（“#toLookInto”）.html（）；
$（“#toFind”）。在（“keyup”，function（）上{
var toFind=$（“#toFind”）.val（）；
var regx=新的RegExp（toFind，“g”）；
var newstring=toLookInto.replace（regx，“+toFind+”）
$（“#toLookInto”）.html（新闻字符串）
});
。突出显示{
颜色：红色；
}


虚拟文本foo bar cat mewo虚拟文本foo bar cat mewo虚拟文本foo某物奇数条cat mewo虚拟文本foo bar cat mewo



文本字段将在每次按下时触发
捕获搜索短语（您正在搜索或查找的单词）。捕获搜索区域（正在搜索的表格或段落）。查看搜索区域，看看是否可以找到搜索短语。一旦它存在，替换为一个字符串，该字符串周围有一个HTML元素标记

用相同的词替换搜索到的词，但将其包装在具有特定CSS类的范围内。使用CSS定制外观


var-toLookInto=$（“#toLookInto”）.html（）；
$（“#toFind”）。在（“keyup”，function（）上{
var toFind=$（“#toFind”）.val（）；
var regx=新的RegExp（toFind，“g”）；
var newstring=toLookInto.replace（regx，“+toFind+”）
$（“#toLookInto”）.html（新闻字符串）
});
。突出显示{
颜色：红色；
}


虚拟文本foo bar cat mewo虚拟文本foo bar cat mewo虚拟文本foo某物奇数条cat mewo虚拟文本foo bar cat mewo



文本字段将在每次按下时触发
，这可能是一种过度使用的方法。但我就是这样让它工作的

技术：
1-将原始表（作为整个DOM）放入JS变量中

2-将该变量克隆到另一个JS变量中

3-克隆用作参考。将保持不变，永远不会修改

4-突出显示的工作原理是提取找到的短语，用
换行，该范围被赋予特定的CSS以从文本的其余部分中脱颖而出


这背后的原因是，如果我们编辑原始表，然后再次尝试搜索，则插入的HTML标记将包含在搜索词中，因此搜索将中断

我们将始终搜索克隆，然后从克隆中获取文本，对其进行处理，然后将新处理的短语应用于原始表。换句话说，如果在克隆对象中找到搜索的短语，则其内容将复制到原始表中


如果我再次这样做，我会用JQuery替换整个过程。但无论如何，这段代码需要优化



var originalTable=document.getElementById（“myTable”）；
var realTr=originalTable.getElementsByTagName（“tr”）；
var cloneTable=originalTable.cloneNode（true）；
var cloneTr=cloneTable.getElementsByTagName（“tr”）；
函数myFunction（）{
变量输入，过滤器，cloneTd，cloneTdValue，realTd，i，inputValue，inputValueUpper；
输入=document.getElementById（“myInput”）；
inputValue=input.value；
inputValueUpper=inputValue.toUpperCase（）；
对于（i=0；i-1）{
var newStr=wrapStuff（输入值、克隆值、索引）；
realTr[i].style.display=“”；
realTd=realTr[i].getElementsByTagName（“td”）[0]；
realTd.innerHTML=newStr；
}否则{
realTr[i].style.display=“无”；
}
}
}