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

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.