JS JQuery 高亮插件 toUpperCase 不是函数，导致无限循环

Question

我正在尝试编辑 jQuery 高亮插件来突出显示多个单词。它工作得很好，直到你按下空格键，然后它会导致 FF 冻结在无限循环中。

FireBug 报告 .toUpperCase 不是函数，但是当我更改相同的代码时，它不会更改数组元素，这很好，但不会突出显示这两个单词，仅突出显示第一个单词。当按下空格键时，所有突出显示都会消失。

这是我到目前为止所拥有的。有问题的代码位于最后的 return this.each(function(){}) 块中：

jQuery.fn.highlight = function(pat) {
function innerHighlight(node, pat) {
    var skip = 0;

    if (node.nodeType == 3) {
        var pos = node.data.toUpperCase().indexOf(pat);
        if (pos >= 0) {
            var spannode = document.createElement('span');
            spannode.className = 'highlight';
            var middlebit = node.splitText(pos);
            var endbit = middlebit.splitText(pat.length);
            var middleclone = middlebit.cloneNode(true);
            spannode.appendChild(middleclone);
            middlebit.parentNode.replaceChild(spannode, middlebit);
            skip = 1;
        }
    } else if (node.nodeType == 1 && node.childNodes && !/(script|style)/i.test(node.tagName)) {
        for (var i = 0; i < node.childNodes.length; ++i) {
            i += innerHighlight(node.childNodes[i], pat);
        }
    }

    return skip;    
}
return this.each(function() {
    var parts = pat.split(' ');
    console.log(parts);
    for (var i in parts) {
        innerHighlight(this, parts[i].toUpperCase());
        console.log("parts["+i+"] >> " + parts[i]);
    }
});
};

这是 FireBug 中的控制台输出：

["guy"]                            jquery...ht-3.js (line 46)
parts[0] >> guy                    jquery...ht-3.js (line 49)
parts[i].toUpperCase is not a function
    [Break On This Error] innerHighlight(this, parts[i].toUpperCase());
                                   jquery...ht-3.js (line 48)

任何帮助将不胜感激！

Answer 1

哦亲爱的。该插件使用未过滤的 for...in 循环来迭代数组。 这很糟糕：

for...in 不应该用于迭代数组，其中索引
顺序很重要。数组索引只是可枚举的属性
整数名称，其他方面与一般对象相同
特性。不保证 for...in 将返回
以任何特定顺序索引，它将返回所有可枚举的
属性，包括具有非整数名称的属性和那些具有非整数名称的属性
继承。

因为迭代的顺序取决于实现，所以迭代
数组上的元素可能不会以一致的顺序访问。所以
迭代时最好使用带有数字索引的 for 循环
在访问顺序很重要的数组上。

如果只考虑对象的属性，则
应执行 hasOwnProperty 检查以确保仅
使用对象的属性而不是继承的属性
（也可以使用propertyIsEnumerable，但不直观）。

---

因此，将其更改

for (var i in parts) {
    innerHighlight(this, parts[i].toUpperCase());
    console.log("parts["+i+"] >> " + parts[i]);
}

为：

for (var i=0; i<parts.length; i++) {
    innerHighlight(this, parts[i].toUpperCase());
    console.log("parts["+i+"] >> " + parts[i]);
}