Jquery/PunBB Replace Number with String

Question

Using PunBB on Forumotion the idea was to use the Points system to replace the number of points displayed with a string of text. Using a span class I first defined a class 'honorpoints' around the code that shows the number of points a user has.

<span class="honorpoints"><!-- BEGIN profile_field -->{postrow.displayed.profile_field.CONTENT}<!-- END profile_field --></span>

When using that code on the forums it will display a number, based on a user's points, next to their username. The following jQuery code was what I tried to use to replace the number.

$(".honorpoints").each(function(){
    var elm = $(this);
    var number = parseFloat(elm.text(), 10);
    if (number >= 1 && number <= 500) {
        state = "rank 1";
    } else if (number >= 500 && number < 3000) {
        state = "rank 2";
    }
    elm.text(state);
});

However, this doesn't do anything and the numbers are still there. It's supposed to replace UserA : 234 and UserB : 571 with UserA : rank 1 and UserB : rank 2. The code does work however when used on jsFiddle and when working with solely numbers instead of the {postrow.displayed.profile_field.CONTENT} code. Help is appreciated!

Can we see what `{postrow.displayed.profile_field.CONTENT}` outputs? What does a `console.log('"'+elm.text()+'"');` placed right after the `var elm = $(this);` declaration produce (F12, Console tab to see console output for Firebug or Developer Tools on FF or Chrome)? — Zach Shipley, Aug 01 '12 at 00:02
@ZachShipley Imputing the console.log code there didn't seem to do anything when inspecting the element in Chrome. Here's a link to part of the forum, to the right of the poster's name is a number along with their rank. The number is in the span class of 'honorpoints' yet the code doesn't seem to even affect it. http://www.bvgstudios.net/t141-community-keep-communicating-7-10-2012 — user1567186, Aug 01 '12 at 00:17

Ricardo Alvaro Lohmann · Answer 1 · 2012-08-01T00:23:16.227

The following line try to parse "UserA : 234", that's why you're getting error. parseFloat(elm.text(), 10);

You have to fix your ifs, both match 500

You can fix it using the following code:

$(".honorpoints").each(function(){
    $(this).text(function(i, text) {
        return text.replace(/\d+$/, function(match) {
            if(match >= 1 && match <= 500) return "rank 1";
            else if(match > 500 && match < 3000) return "rank 2";
        });
    });
});

Explanation:

$: matches end of string;
\d: matches only digits;
+: matches the match one or more times, so it can match 0 and 5000000;

demo

References:

Regexp: https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/RegExp
replace: https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String/replace
.text(): http://api.jquery.com/text/

@user1567186 Did you put it in `$(document).ready` ? You can see that my demo is working. — Ricardo Alvaro Lohmann, Aug 01 '12 at 02:20

score 0 · Accepted Answer · answered Aug 01 '12 at 00:40

Looking at the source of the page you provided in your comment, I believe your $('.honorpoints').each method is being called before the document is fully loaded (99546.js). Unless I'm missing something, you need to wrap that method in a $(document).ready function so it's executed only once the DOM is ready:

$(document).ready(function() {
    $(".honorpoints").each(function(){
        var elm = $(this);
        var number = parseFloat(elm.text(), 10);
        var state = "";
        if (number >= 1 && number <= 500) {
            state = "rank 1";
        } else if (number >= 500 && number < 3000) {
            state = "rank 2";
        }
        elm.text(state);
    });
});

I also added a declaration for the state variable since it's a good practice (as it currently is in your question, the state variable is actually window.state because it was not previously declared).

Jquery/PunBB Replace Number with String

2 Answers2