用jQuery忽略HTML标签中的数字

Question

I have a webfont I really want to use, however the font designer got lazy when creating the number characters. They are all different sizes compared to letter characters.

I'm trying to standardize them by applying a unique bit of css to each number character. This is only going to apply to h1 tags.

My technique in jquery is to search through text and apply a <span class="font-fix-1">1</span> for the number 1, <span class="font-fix-2">2</span> for the number 2 etc.

However, I don't want to target numbers which may be in html scripts. For example, if I have the following h1:

<h1>This is a Heading with the number 20 in it and some <sup style="font-size:12px">annoying html</sup></h1>

I don't want the script to replace the number "2" in the <sup> tag, just the <h1> tag only.

Does anyone know how to recognize this with javascript?

My script I have so far is:

var h1_text = "";
jQuery("h1").each(function(){
    h1_text = jQuery(this).html();
    h1_text = h1_text.replace(/1/g, '<span class="font-fix-1">1</span>');
    jQuery(this).html(h1_text);
});

Answer 1

You can do like this

HTML

<span>
    <a>123456789</a> //number that you want to ignore
    Text I want //the text that you want
</span>

JavaScript

alert($("span").contents().filter(function(){
    return this.nodeType === 3;
}).text())