wrap numbers in span and .not()

Question

This is similar to other questions, but it's about something specific.

The first example doesn't do anything (breaks)

The second example works except that it hacks up html tags (specifically a tags) as well, so href="something with numbers" get hashed and then the whole thing falls apart

Then I get anchors that have their href attributes hashed up with span tags. Obviously that isn't what I want. What am I doing wrong? There must be some way to put all numbers and ", - : ()" inside a span without hashing up the html tags themselves.

$('#main-content p').contents().not("a").html(function(i, v) {
    return v.replace( /([0-9(),-:]+)/g , '<span class="number">$1</span>');
});


$('#main-content p').html(function(i, v) {
    return v.replace( /([0-9(),-:]+)/g , '<span class="number">$1</span>');
});

Answer 1

You are replacing all number. You need to only select the text nodes within the element. This code is not tested, but should work.

EDIT: You have to also call .contents(). See this answer

EDIT 2: I got it working in this FIDDLE . Let me know what you think. Did you mean to replace special characters as well as numbers?....because that is what is currently happening per your original regEx.

$('p').contents().filter(function () { return this.nodeType === 3; }).each(function(){
    $(this).replaceWith($(this).text().replace( /([0-9(),-:]+)/g , 
    '<span class="number">$1</span>'));
 });