Javascript to Parse Reddit Comment Page for Usernames

Question

I'm working on a bookmarklet for a Sub reddit and I'm trying to grab all the usernames on a comments page so I can parse them, then come back and update info next to them, similar to what RES does. The author of each comment has a class that is prefixed with Author but then has different stuff at the end of the class name. How would I go about grabbing all the usernames?

Then once I have the list, how would I update each one with an additional icon essentially?

Any suggestions/Tutorials that do similar things would be great.

Edit: I'm not really sure what portions of the markup would be helpful without giving a huge block. Here's the same question I asked in the Javascript Subreddit. http://www.reddit.com/r/javascript/comments/yhp7j/best_way_to_find_all_the_usernames_on_a_reddit/

You should be able to Inspect the name elements and See what I'm working with.

Currently working with this: http://net.tutsplus.com/tutorials/javascript-ajax/create-bookmarklets-the-right-way/

So I've got a Hello World Style Bookmarklet working that checks for Jquery and loads it if it's not present and just throws an alert.

Can you show an example of the mark-up that contains the author-names (for those of us, including me, that've never visited Reddit, or inspected the source)? How far have you got with the bookmarklet? Do you currently have any working code? — David Thomas, Aug 19 '12 at 22:43
@DavidThomas Threw some more info in. not sure how much of the mark up would be helpful, so Linked to a comment thread so you could check it out.Thanks for the help! — DiscontentDisciple, Aug 19 '12 at 22:54

David Thomas · Accepted Answer · 2012-08-20T09:28:15.457

From a quick look at the page you linked to in your question, it seems as if the mark-up surrounding user-names is as follows (using, presumably, your user-name as an example):

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

If that's the case, and the jQuery library is available (again, from your question), one approach is to simply use:

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.

Or, similarly just use the fact that the user-name seems to be predictably the last portion of the URL in the a element's href attribute:

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.

Both of these approaches put the img within the a element. If you want it before the a element, then simply use:

// 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.

References:

Wow. Awesome man! I'm using the last one. Could you explain to me exactly how this works, My JS skill is lacking? — DiscontentDisciple, Aug 19 '12 at 23:25
Actually, just found an issue with this -- the mods in the sidebar are tagged as authors as well, even though they have not commented. Not the end of the world, but awkward behavior that would be nice to avoid if possible. Any ideas? — DiscontentDisciple, Aug 19 '12 at 23:33
There is also a JSON Feed available, but it seems weird to request a page a second time. if you add .json to the end of the page URL you get it in JSON. So that's easy to parse, but seems like a weird idea from a resource perspective. — DiscontentDisciple, Aug 19 '12 at 23:35
Updated the answer with some explanatory notes as to how the final code-block works. To address the mods-in-sidebar issue, simply amend the initial jQuery selector to target only those `a` elements in the content (`$('#mainContent a')...` for example, using an `id`-based example). — David Thomas, Aug 20 '12 at 09:29

Javascript to Parse Reddit Comment Page for Usernames

1 Answers1