Traverse all text nodes of html

Replace numbers with a span

HTML

<div id="cnt">
    <p><a href="page4.html">go to page 4</a> test 12</p>text as 4444
    <p><a href="page4.html">go to page 4</a> text 34</p>
</div>
<input type="button" onclick="replaceText(document.getElementById('cnt'))" value="replace">

CSS

.number-font {
    font-size: 20px;
    color: maroon;
}

JavaScript

console.log('init');

function replaceText(selector) {
    for (var i = 0; i < selector.childNodes.length; i++) {
        var children = selector.childNodes[i].childNodes; //this is the only way to access text as child nodes
        for (var k = 0; k < children.length; k++) {
            var child = children[k];
            if (child.nodeType == 3) {
                var text = child.nodeValue; //extra variable for easier debugging
                var newtext = doReplace(text);
                if (newtext != text) {
                    child.innerHTML = newText;
                }
            } else {
                replaceText(child);
            }
        }
    }
}

function doReplace(text) {
    return text.replace(/[0-9]+/g, function (a, b) {
        return '<span class="number-font">' + a + '</span>'
    })
}