在自定义对象上使用 jQuery 这样的选择器

Question

我正在处理一些 casperjs 脚本，我有一个对象数组，如下所示：

[
    {
        "element": {
            "attributes": {
                "href": "http://google.com",
                "rel": "google"
            },
            "html": "link1",
            "nodeName": "a",
            "tag": "<a href=\"http://google.com\" rel=\"google\">link1</a>",
            "text": "link1"
        }
    },
    {
        "element": {
            "attributes": {
                "class": "someclass",
                "href": "http://yahoo.com",
                "id": "yahooid"
            },
            "html": "yahoo anchor",
            "nodeName": "a",
            "tag": "<a href=\"http://yahoo.com\" id=\"yahooid\" class=\"someclass\">yahoo anchor</a>",
            "text": "yahoo anchor
        }
    }
]

对于我需要使用这些链接完成的某些任务，如果我可以使用 jQuery 之类的 selectors.

select 它们将会很有用

我有点知道如何编写类似的代码，但是正在为所有类型的 selectors ([name|=”value”], [name*=”) 处理所有正则表达式value”], [name~=”value”], [name$=”value”], etc) 让我做噩梦。

最简单的方法是什么？

Answer 1

如果您的要求只是从对象数组中获取锚标记链接，那么这可能会有所帮助。另请注意，在您的 OP 中，最后一个元素有一个错误 "text": "yahoo anchor，缺少一个结尾的 "。希望这是你的错字。

var objArray = [
    {
        "element": {
            "attributes": {
                "href": "http://google.com",
                "rel": "google"
            },
            "html": "link1",
            "nodeName": "a",
            "tag": "<a href=\"http://google.com\" rel=\"google\">link1</a>",
            "text": "link1"
        }
    },
    {
        "element": {
            "attributes": {
                "class": "someclass",
                "href": "http://yahoo.com",
                "id": "yahooid"
            },
            "html": "yahoo anchor",
            "nodeName": "a",
            "tag": "<a href=\"http://yahoo.com\" id=\"yahooid\" class=\"someclass\">yahoo anchor</a>",
            "text": "yahoo anchor"
        }
    }
]

$(function(){
   $.each(objArray,function(i,v){      
     var link = this.element.attributes.href ;
     $('div').append(link  + '<br/>');
     
   });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>


</div>

Answer 2

这是我最终使用的：

function select( selector ) {
    var whitespace = "[\x20\t\r\n\f]",
    identifier = "(?:\\.|[\w-]|[^[=10=]-\xa0])+",
    attributes = "\[" + whitespace + "*(" + identifier + ")(?:" + whitespace + "*([*^$|!~]?=)" + whitespace + "*(?:\"((?:\\.|[^\\\"])*)\"))" + whitespace + "*\]",
    elFound = [];

    try {
        links.forEach( function(link) {
            expr = new RegExp( attributes );
            match = expr.exec( selector );
            attribute = match[1];
            operator = match[2];
            value = match[3];
            check = ( attribute == 'text' ) ? link.element[attribute] : link.element.attributes[attribute];

            switch( operator ) {
                    case "=":
                          if( check && check == value ) { elFound.push( link ); }
                          break;
                    case "!=":
                          if( check && check != value ) { elFound.push( link ); }
                          break;
                    case "*=":
                          if( check && check.indexOf( value ) > -1 ) { elFound.push( link ); }
                          break;
                    case "^=":
                          if( check && check.indexOf( value ) === 0 ) { elFound.push( link ); }
                          break;
                    case "$=":
                          if( check && check.slice( -value.length ) == value ) { elFound.push( link ); }
                          break;
                    default:
                          break;
            }
        });
    } catch(e) {
        console.log(e);
    }

    return elFound;
}

在自定义对象上使用 jQuery 这样的选择器

Using selectors like jQuery on custom objects

javascript

regex

jquery

phantomjs

casperjs