寻找用javascript替换字符串的最高效的方法

Searching for most performant way for string replacing with javascript

本文关键字：方法 高效 字符串 javascript 替换 寻找      更新时间：2023-09-26

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

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

，以便给匹配的部分另一种颜色。如果我有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;
},

此方法仅突出显示匹配部分的第一次出现。我这样使用它。一旦请求从服务器返回，我通过循环遍历每个条目来构建一个带有匹配条目的html UL列表，并在每个循环中调用此方法以突出显示匹配的部分。

就像我说的，对于最多100个项目，它工作得很好，但是对于500个或更多的项目来说，它太多了。

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

我还考虑过使用"setTimeOut"在一个额外的函数中做它，或者可能只对项目做它，目前是可见的，因为只有几个项目是可见的，而对于其他的你必须滚动

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

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

你将得到这个:

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

JavaScript中的字符串替换非常容易，使用String.replace():

function linkify(s, part)
{
    return s.replace(part, function(m) {
        return '<span style="color:#81BEF7;font-weight:bold">' + htmlspecialchars(m) + '</span>';
    });
}
function htmlspecialchars(txt)
{
    return txt.replace('<', '&lt;')
        .replace('>', '&gt;')
        .replace('"', '&quot;')
        .replace('&', '&amp;');
}
console.log(linkify('marbuel', 'bue'));

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

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

这非常快。比上面的代码快得多。自动补全功能中500个项目似乎没有问题。但有人能解释一下，为什么这比我的方法快得多或者用字符串来做。不使用正则表达式替换?我不知道。

谢谢!

相关文章：