Question

我在客户端使用C＃和javascript编写自己的自动完成文本框控件。在客户端，我想替换字符串中与用户搜索的字符匹配的字符以突出显示它。例如，如果用户正在搜索字符'bue'，我想替换单词'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”来执行额外的功能，或者只针对当前可见的项目进行操作，因为只有几个项目可见，而其他项目则需要滚动。< / p>

Answer 1

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

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

你将拥有：

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

Answer 2

使用String.replace()：

，JavaScript中的字符串替换非常简单

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'));

Answer 3

我通过使用正则表达式而不是之前发布的方法修复了此问题。我现在用以下代码替换字符串：

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

这很快。比上面的代码快得多。自动完成中的500项似乎没有问题。但任何人都可以解释一下，为什么这个方法比我的方法更快，或者使用string.replace而没有正则表达式呢？我不知道。

THX！

搜索用javascript替换字符串的最佳性能方式

3 个答案: