Adding Class to the nth Digit of Numbers

Question

There is a nice way in this answer for adding a span to every number in the page.

var regex = /(\d+)/,
    replacement = '<span>$1</span>';

function replaceText(el) {
    if (el.nodeType === 3) {
        if (regex.test(el.data)) {
            var temp_div = document.createElement('div');
            temp_div.innerHTML = el.data.replace(regex, replacement);
            var nodes = temp_div.childNodes;
            while (nodes[0]) {
                el.parentNode.insertBefore(nodes[0],el);
            }
            el.parentNode.removeChild(el);
        }
    } else if (el.nodeType === 1) {
        for (var i = 0; i < el.childNodes.length; i++) {
            replaceText(el.childNodes[i]);
        }
    }
}

replaceText(document.body);

Is it possible to add a span to the every third digit of the numbers? I mean, without using Lettering.js.

Edit

@thg435 has already answered the question, but I dicovered that his second regex /\d(?=\d\d(\d{3})*\b does not work on Arabic numbers, which I'm working on. (Arabic numbers start from "٠" to "٩", and can be reffered as [٠-٩] in regex.) Probably, the problem is with the \b at the end of the second regex.

Also, as an example of what I'm trying/hoping to achieve, ١٢٣٤ should be turn into ١<span>٢</span>٣٤.

georg · Accepted Answer · 2013-04-26T15:42:24.140

1

If I understood correctly

html = text.replace(/(\d\d)(\d)/g, function($0, $1, $2) {
      return $1 + "<span>" + $2 + "</span>" })

This replaces every third digit from the right:

> a = "foo 1234567890 bbb 123456"
"foo 1234567890 bbb 123456"
> a.replace(/\d(?=\d\d(\d{3})*\b)/g, "[$&]")
"foo 1[2]34[5]67[8]90 bbb [1]23[4]56"

For arabic digits consider:

String.prototype.reverse = function() { return this.split("").reverse().join("") }
result = str.replace(/[\u0660-\u0669]+/g, function(s) {
    return s.
        reverse().
        replace(/(..)(.)/g, "$1aaa$2zzz").
        reverse().
        replace(/zzz(.)aaa/g, "<span>$1</span>")
})

It's rather cumbersome, but appears to work: http://jsfiddle.net/VSTJs/2/

edited Apr 26 '13 at 15:42

answered Apr 26 '13 at 07:02

georg

211,518
52
313
390

Thanks, especially for the regex. However, as I mentioned, this is to process numbers, so the digits should be selected from the right. Any idea? – Iryn Apr 26 '13 at 07:53
You have already answered the question, so I will mark this as answer anyway. There's just one missing point: I'm not working on english numbers, but arabic ones, and it seems like this regex does not work on them. Would you mind to tell me how should I handle that? The character range is [٠-٩]. – Iryn Apr 26 '13 at 09:10
@Iryn: I have no experience with Arabic... but I can try. Could you edit your question and add some examples of your content? Like "the function should turn this one into that one". – georg Apr 26 '13 at 10:59
There's seems to be some problem. Please see the updated fiddle: http://jsfiddle.net/VSTJs/1/ – Iryn Apr 26 '13 at 15:26
@Iryn: the "g" flag was missing. Updated. – georg Apr 26 '13 at 15:43
Thank you. If possible, please also tell me how can I only proccess 5 or more digits numbers (e.g 12345 but not 1234). – Iryn Apr 26 '13 at 16:25
@Iryn: replace this `str.replace(/[\u0660-\u0669]+/g` with `str.replace(/[\u0660-\u0669]{5,}/g` – georg Apr 26 '13 at 16:30
I've discussed your regex [**here**](http://stackoverflow.com/questions/16241625/why-this-regex-does-not-work-with-eastern-arabic-numerals). Someone has suggested the following regex and it works well in general: `[\u0660-\u0669](?=[\u0660-\u0669][\u0660-\u0669]([\u0660-\u0669]{3})*(?![\u0660-\u0669]))`, only I can not make it to match only 5 or more digit numbers. If possible, please take a look. – Iryn Apr 27 '13 at 03:35

Adding Class to the nth Digit of Numbers

1 Answers1

Linked