Question

我正在构建Chrome扩展程序，此扩展程序做的一件事就是在当前页面中查找<a>属性与给定正则表达式匹配的第一个href标记。仅限JS。

我有几个解决方案，我尝试了它们，但每次，由于我尝试的解决方案，页面冻结（即如果我评论执行此逻辑的行，页面正确加载）。所以我需要一个快速解决方案。

以下是我的尝试：

解决方案1：Xpath

var reg = something;
var result = document.evaluate(
    '//*[local-name()="a"][contains(@href, "rss") or contains(@href, "feed")]', //first filtering
     document, null, 0, null
);

var item;
while (item = result.iterateNext()) {
    if (item.href.matches(reg)) // second and real filtering
    return item.href;
}

网页冻结。

解决方案2：使用匹配（）

的Xpath

var result = document.evaluate(
    "//*[local-name()='a'][matches(@href, my_regex)]", //first filtering
     document, null, 0, null
);

var item;
while (item = result.iterateNext()) {
    return item.href;
}

我尝试在myqgex之间硬编码，但我在Chrome控制台中遇到错误（不是有效的Xpath表达式）。即使放一些像[matches(@href, 'rss')]这样简单也会产生同样的错误。怀疑与xpath 1.0或2.0相关的内容，但没有进行太长时间的调查

解决方案3：document.body.innerHTML.match（）

if (url = document.body.innerHTML.toString().match(reg)[0])
    return url;

网页冻结。

所以现在我没有那么多想法，也许尝试使用xpath的匹配（）进行调查，但这基本上都是。你们有什么想法吗？

Answer 1

这是一个解决方案，您可以调整以寻找字符串，正则表达式或两者：

var string_match = "";
var regexp_match = new RegExp("www.*", "i");

var filter = {
    acceptNode: function(node){
        if((node.nodeType === 1) && (node.tagName === "A")){
            return NodeFilter.FILTER_ACCEPT;
        }
    }
}

var tree_walker = document.createTreeWalker(document.body, NodeFilter.SHOW_ELEMENT, filter, false);

while(tree_walker.nextNode()){
    if(tree_walker.currentNode.href === string_match){
        console.log(tree_walker.currentNode);
        break;
    }else if(regexp_match.test(tree_walker.currentNode.href)){
        console.log(tree_walker.currentNode);
        break;
    }
}

这里是小提琴：http://jsfiddle.net/59vFt/2/

我使用document.TreeWalker我认为与获取元素标签和内容更加异步，尽管这也可以。

是的，innerHTML很糟糕 - 尽量避免使用它：P

首先找<a> tag whose href matches regex</a>

1 个答案: