Inserting spans and classes around characters in a string of raw text

Question

I have a string of raw text which looks something like this:

1 . . 3 . 4 . | A . A . N . | 1 . 1 . . .

I sadly cannot access the source code, but need to add a span with a class to each of those characters, so that the outputted HTML would look something like this:

<span class="1">1</span> . . <span class="3">3</span> . <span class="4">4</span> . <span class="divider">|</span>

What would be the best way to do that using jQuery?

Answer 1

you need String.replace

html = str.replace(/[^.]/g, 
     function($0) { return "<span class='" + $0 + "'>" + $0 + "</span>" })

in response to the comment

$(function() {
   var s = $(yourdiv).html();
   s = s.replace(/[^.]/g, function($0) { replacement code });
   $(yourdiv).html(s);
});

this reads html from the div, performs the replace operation and put html back to the document.

Answer 2

container.innerHTML = container.innerHTML.
    replace(/\d+/g, '<span class="$1">$1</span>').
    replace(/\|/g, '<span class="divider">|</span>');