Javascript to Parse用户名的Reddit评论页面

Question

我正在研究Sub reddit的书签，我正试图抓住评论页面上的所有用户名，这样我就可以解析它们，然后回来并更新它们旁边的信息，类似于RES。每个评论的作者都有一个以作者为前缀的类，但在类名的末尾有不同的东西。如何获取所有用户名？

然后，一旦我有了这个列表，我将如何用一个额外的图标更新每一个？

任何做类似事情的建议/教程都会很棒。

编辑：我不确定标记的哪些部分在没有给出大块的情况下会有所帮助。这是我在Javascript Subreddit中提出的相同问题。 http://www.reddit.com/r/javascript/comments/yhp7j/best_way_to_find_all_the_usernames_on_a_reddit/

您应该能够检查名称元素并查看我正在使用的内容。

目前正在处理此问题：http://net.tutsplus.com/tutorials/javascript-ajax/create-bookmarklets-the-right-way/

所以我有一个Hello World Style Bookmarklet工作，检查Jquery并加载它，如果它不存在，只是抛出一个警报。

Answer 1

通过快速查看您在问题中链接到的页面，似乎就好像围绕用户名的标记如下（使用，可能是您的用户名）示例）：

<a href="http://www.reddit.com/user/DiscontentDisciple" class="author id-t2_4allq" >DiscontentDisciple</a>

如果是这种情况，并且jQuery库可用（再次，从您的问题），一种方法是简单地使用：

var authors = [];

$('a.author').html(
    function(i, h) {
        var authorName = $(this).text();
        if ($.inArray(authorName, authors) == -1) {
            authors.push(authorName); // an array of author-names
        }
        return '<img src="path/to/' + encodeURIComponent(authorName) + '-image.png" / >' + h;
    });

console.log(authors);

JS Fiddle proof-of-concept

或者，同样只是使用这样一个事实：用户名似乎可以预测a元素的href属性中URL的最后一部分：

var authors = [];

$('a.author').html(
    function(i, h) {
        var authorName = this.href.split('/').pop();
        if ($.inArray(authorName, authors) == -1) {
            authors.push(authorName);
        }
        return '<img src="http://www.example.com/path/to/' + authorName+ '-image.png" />' + h;
    });

console.log(authors);

JS Fiddle proof-of-concept

这两种方法都将img 放在 a元素中。如果您希望之前 a元素，那么只需使用：

// creates an 'authors' variable, and sets it to be an array.
var authors = [];

$('a.author').each( // iterates through each element returned by the selector
    function() {
        var that = this, // caches the this variable, rather than re-examining the DOM.
            // takes the href of the current element, splits it on the '/' characters,
            // and returns the *last* of the elements from the array formed by split()
            authorName = that.href.split('/').pop();

        // looks to see if the current authorName is in the authors array, if it *isn't*
        // the $.inArray returns -1 (like indexOf())
        if ($.inArray(authorName, authors) == -1) {
            // if authorName not already in the array it's added to the array using
            // push()
            authors.push(authorName);
        }

        // creates an image element, concatenates the authorName variable into the
        // src attribute-value
        $('<img src="http://www.example.com/path/to/' + authorName+ '-image.png" />')
            // inserts the image before the current (though converted to a jQuery
            // object in order to use insertBefore()
            .insertBefore($(that));
    });

console.log(authors);
​

JS Fiddle proof-of-concept

参考文献：

• each()。
• $.inArray()。
• insertBefore()。