搜索用javascript替换字符串的最有效方法

我正在客户端使用C#和javascript编写自己的自动完成文本框控件。在客户端，我想替换与用户搜索的字符相匹配的字符串中的字符以突出显示它。例如，如果用户正在搜索字符'bue'，我想在单词'marbuel'中替换这些字母，如下所示：

mar<span style="color:#81BEF7;font-weight:bold">bue</span>l

marbuel

以便为匹配零件提供另一种颜色。如果我的“自动完成”中有100-200个项目，那么它的效果相当不错，但是当它达到500个或更多项目时，它会占用太多的时间

以下代码显示了执行此逻辑的方法：

 HighlightTextPart: function (text, part) {
    var currentPartIndex = 0;
    var partLength = part.length;
    var finalString = '';
    var highlightPart = '';
    var bFoundPart = false;
    var bFoundPartHandled = false;
    var charToAdd;
    for (var i = 0; i < text.length; i++) {
        var myChar = text[i];
        charToAdd = null;
        if (!bFoundPart) {
            var myCharLower = myChar.toLowerCase();
            var charToCompare = part[currentPartIndex].toLowerCase();
            if (charToCompare == myCharLower) {
                highlightPart += myChar;
                if (currentPartIndex == partLength - 1)
                    bFoundPart = true;

                currentPartIndex++;
            }
            else {
                currentPartIndex = 0;
                highlightPart = '';
                charToAdd = myChar;
            }
        }
        else
            charToAdd = myChar;

        if (bFoundPart && !bFoundPartHandled) {
            finalString += '<span style="color:#81BEF7;font-weight:bold">' + highlightPart + '</span>';
            bFoundPartHandled = true;
        }

        if (charToAdd != null)
            finalString += charToAdd;
    }
    return finalString;
},

HighlightTextPart:函数（文本，部分）{
var currentPartIndex=0；
var partLength=part.length；
var finalString=''；
var highlightPart=''；
var bFoundPart=false；
var bFoundPartHandled=false；
var-chartoad；
对于（变量i=0；i

此方法仅高亮显示匹配零件的第一次出现。 我使用它如下。一旦请求从服务器返回，我通过在每个项目上循环来构建一个包含匹配项目的HTMLUL列表，在每个循环中我调用此方法以突出显示匹配部分

正如我所说的，对于多达100种的食物，它的味道相当不错，但对于500种或更多的食物来说，它太难吃了

有没有办法让它更快？也许通过使用正则表达式或其他技术

---

我还考虑使用“setTimeOut”在一个额外的函数中执行此操作，或者只对当前可见的项目执行此操作，因为只有几个项目可见，而其他项目则必须滚动。

尝试限制可见列表的大小，例如，最多只显示100个项目。从可用性的角度来看，甚至可能降到只有20个项目，所以它甚至会更快。还要考虑使用类——看看它是否改进了性能。所以不是

mar<span style="color:#81BEF7;font-weight:bold">bue</span>l

marbuel

您将拥有以下功能：

mar<span class="highlight">bue</span>l

marbuel

JavaScript中的字符串替换非常容易：

功能链接化（s，部分）
{
返回s.更换（部件，功能（m）{
返回'+htmlspecialchars（m）+''；
});
}
函数htmlspecialchars（txt）
{
返回txt.replace（“”，“”）
.替换（“，”））
.替换（“&”、“和”）；
}
log（linkify（'marbuel'，'bue'）；

我通过使用regex而不是以前发布的方法解决了这个问题。我现在用以下代码替换字符串：

return text.replace(new RegExp('(' + part + ')', 'gi'), "<span>$1</span>");

返回text.replace（新的RegExp（“（“+part+”）”，“gi”），“$1”）；

这相当快。与上面的代码一样快得多。自动完成中的500项似乎没有问题。但有人能解释一下，为什么这比我的方法快，或者用string.replace而不用regex？我不知道

---

谢谢

这里没有C#。我重新标记到JS+1关于检查代码并改进代码，您可以在@WooCaSh上提问：我认为这是一个有效的SO问题，因为问题已经明确列出。OP并没有要求审查所有的编码方面。@Neolisk是和否。这部分问题：

有没有办法让它更快？也许可以使用正则表达式或其他技术？

建议我使用codereview。但这里也是提问的好地方。@WooCaSh：换句话说，OP在合理时间内得到答案的机会更大。我无意冒犯CodeReview，但我发现越来越多的人在关注它。thx。。我使用css类对其进行了更改。对于我认为主要的问题，我将使用少量的自动完成项。正如我所说的，200个项目可以很好地工作，但为了确保可用性，我认为200个项目也太多了。但我仍然很惊讶，处理更多的物品需要多少时间。但我不知道如何提高性能。也许我会尝试在用户只滚动一杯物品时按需操作的建议。谢谢，谢谢。谢谢回复。“替换”方法也是我尝试过的。但它似乎并不像我上面的代码那样快。问候@Marbuel这可能是因为replace（）总是返回一个新字符串，所以如果没有匹配项，它将返回相同的字符串，这将非常慢。你可以先做匹配，然后在必要的地方进行替换。这也是我尝试过的一种方法。检查所有自动完成项，首先计算要替换的子字符串索引，然后使用函数“substring（）”连接最后一个字符串。我尝试了我所熟悉的一切，但没有能够提高性能。另一件我不明白的事情是，直到浏览器再次响应并完全构建列表所需的时间随着项目的数量呈指数增长。虽然200个项目似乎几乎可以毫不拖延地处理，但500个项目需要一秒钟或更多的时间。这让我有点困惑。

return text.replace(new RegExp('(' + part + ')', 'gi'), "<span>$1</span>");