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.

Answer 1

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:

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