Replace all (.) periods within a paragraph

Question

I'm trying to replace all periods with the degree symbol. Using the each method only replaces the first period inside the paragraph tag, not all of them. I'm also trying to make the periods inside the anchor tags to be ignored and not replaced, so the links won't be disrupted by my code. Can anyone help?

$('div.post').each(function(){
    var $h = $(this);
    $h.html( $h.html().replace( '.', '<span class="period">&deg;<\/span>' ) );
});

Edit: I should have mentioned, I want to retain the 'period' class which makes it tricky.

Answer 1

A regex with the g flag (global) should work to replace all of them:

$h.html( $h.html().replace(/\./g, '<span class="period">&deg;<\/span>' ) );

Not matching periods within anchor tags is a significantly harder problem, since regular expressions don't have a sense of hierarchical context within an HTML document. The best approach I could think of would be to recurse through all of the sub-items within the item whose HTML you're targeting and replace within them, skipping them if it's an anchor element.

Answer 2

var span = $('<span class="period">°</span>').get(0);

$('p, p *').each(function (index,element) {
    $.each(element.childNodes, function (index,node) {
        if (node.nodeType == 3) {
            $.each(node.nodeValue.split('.'), function (index,fragment) {
                if ( index > 0 ) {
                    element.insertBefore(span.cloneNode(true),node);
                }
                element.insertBefore(document.createTextNode(fragment),node);
            });
            element.removeChild(node);
        }
    });
});

will solve the problem. The key idea is to split the contents of each text node within a paragraph on the "." character, turn each fragment into a new text node, and then assemble the new text nodes with the span elements containing the degree symbols between them.