StackOverflow: bugs in reputation score values placed in site markup

Question

During development of my StackUnderflow script I spotted possible bug in SO markup. In my script I need to evaluate user reputation so I look for user-details <div> to get it. And this <div> usually looks like this:

<div class="user-details">
    <a href="/users/......./foo">foo</a><br>
    <span class="reputation-score" title="reputation score 1234" dir="ltr">1,2k</span><span title="4 bronze badges"><span class="badge3"></span><span class="badgecount">4</span></span>
</div>

in this case, user currently named foo holds reputation score of 1234. If your script needs to figure out user reputation you should rely on the title attribute which is always in "raw" numeric form (i.e, 2000), not the span text, which is formatted string (i.e. "2k"). So I try to reach this title thing and figured out that for some users it does not contain reputation score, however it looks like it should. In markup it looks like this:

<div class="user-details">
    <a href="/users/4712527/siva">siva</a><br>
    <span class="reputation-score" title="reputation score " dir="ltr">5</span><span title="4 bronze badges"><span class="badge3"></span><span class="badgecount">4</span></span>
</div>

note title="reputation score " - reputation "raw" score is completely missing, yet there's trailing space, so it looks reputation score should be there.

---

Another reputation related bug (again, I am talking about SO) lurks in part that holds my own reputation. The markup looks like this:

<span class="reputation" title="your reputation: 32,479">
    32,479
</span>

Please take a look at title attribute - it reads 32,479 instead of expected: 32479. I also consider this a bug as content of title attribute should stay consistent.

If it is a feature, not a bug, I am open to hear why so :)

EDIT

On User profile reputation looks even worse - title attribute reads reputation not reputation score, there no raw score in title, score is formatted the same way "my reputation" on "top bar", so "k" but with coma. There's bunch of spaces around too.

<div class="reputation" title="reputation">
    32,504 <span class="label-uppercase">reputation</span>
</div>

Answer 1

Yes, non-uniform UI elements can be confusing to users and a pain for page-scrapers. That's one reason that Stack Exchange helpfully supplies an API.

From a UI perspective, it would be best if:

• The title attribute always held the exact reputation.
• The title reputation was in human-readable format. Ideally using commas and periods per the custom of the browsing user's locale.
• The surrounding text in the title attribute should change per the context. EG:
  "Your reputation: 32,479",
  "User Jon Skeet's reputation: 2,799,744",
  etc.

From a page-scraper's perspective, you must deal with what you have, and check for changes constantly. It does not seem hard in this case.

The following jQuery should be close to what you need for the current SE pages:

var repNodes        = $(".reputation-score, .reputation");
repNodes.each ( function (J) {
    var reputation  = -86;  //-- Default error value
    var stripped    = this.textContent.trim ().replace (/[^\dK]/ig, "").replace (/K/i, "00"); // *Normally* have 1 dec place precision when K is used.
    reputation      = parseInt (stripped, 10)  ||  reputation;

    //-- If present in title, the rep value will be more precise.
    if (this.title) {
        stripped    = this.title.replace (/\D/g, "");
        reputation  = parseInt (stripped, 10)  ||  reputation;
    }
    console.log (J, "|  Reputation: ", reputation);
} );

You can test that code by pasting it into the browser console while on a Stack Exchange page.

Answer 2

The "reputation in title" is only populated if the rep shown in the <span> had been abbreviated. So if there is no number in the title, just use the content of the <span> directly.