开发者

JS JQuery Highlight Plugin toUpperCase not a function, causes infinite loop

I am trying to edit the jQuery hightlight plug in to highlight multiple words. It works great until you hit the space bar, then it causes FF to freeze in an infinite loop.

FireBug reports that .toUpperCase is not a function, but when I change the same code back, so it is not altering an array element, it's fine, but does not highlight the two words, only the first one. When the space bar is hit all highlighting goes away.

Here is the what I have so far. The code in question is in the return this.each(function(){}) block at the end:

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.l开发者_开发问答og("parts["+i+"] >> " + parts[i]);
    }
});
};

Here is the console output in 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)

any help would be greatly appreciated!


Oh dear. That plugin is using an unfiltered for...in loop to iterate over an array. That's bad:

for...in should not be used to iterate over an Array where index order is important. Array indexes are just enumerable properties with integer names and are otherwise identical to general Object properties. There is no guarantee that for...in will return the indexes in any particular order and it will return all enumerable properties, including those with non–integer names and those that are inherited.

Because the order of iteration is implementation dependent, iterating over an array may not visit elements in a consistent order. Therefore it is better to use a for loop with a numeric index when iterating over arrays where the order of access is important.

Where only the properties of the object should be considered, a hasOwnProperty check should be performed to ensure that only properties of the object and not inherited properties are used (propertyIsEnumerable can also be used but is not intuitive).


So, change this:

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

to this:

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

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜