Wilto · July 3, 2012 21:06
diff --git a/demo.html b/demo.html
 <!DOCTYPE html>
 <!--[if lt IE 7 ]> <html lang="en" class="ie ie6"> <![endif]-->
 <!--[if IE 7 ]> 	<html lang="en" class="ie ie7"> <![endif]-->
 <!--[if IE 8 ]> 	<html lang="en" class="ie ie8"> <![endif]-->
 <!--[if IE 9 ]> 	<html lang="en" class="ie ie9"> <![endif]-->
 <!--[if (gt IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]-->

 <head>
 	<meta charset="utf-8">
 	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<title>Hide and Tel</title>
 </head>

 <body>
 	<p>Phone numbers wrapped in elements with a class of “tel” won’t have their `tel:` links stripped out. Anything that looks like a phone number but doesn’t have that class will. The alternative is to use a meta tag that disables all `tel:` link generation — which sucks — or to manually add `tel:` links that are useless in most places — which also sucks.</p>
 	<p>Lorem ipsum dolor sit amet, consectetur adipisicing <a href="tel: 555-5513" class="tel">555-5513</a> elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <span class="tel">867-5309</span> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat 555-5555, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 	<script src="lib/show-and-tel.js"></script>
 </body>
 </html>
diff --git a/hide-and-tel.js b/hide-and-tel.js
 (function() {
 	var links = document.getElementsByTagName( "a" );

 	for ( var t = 0, a = links.length; t < a; t++ ) {
 		var el = links[ t ];
 			
 		if( el !== undefined && el.href.indexOf( "tel" ) > -1 ) {	
 			var parent = el.parentNode,
 				num = document.createTextNode( el.textContent );

 			if( el.className.indexOf( "tel" ) === -1 && parent.className.indexOf( "tel" ) === -1 ) {
 				parent.replaceChild( num, el );
 			}
 		}
 	}
 }());
	<!DOCTYPE html>
	<!--[if lt IE 7 ]> <html lang="en" class="ie ie6"> <![endif]-->
	<!--[if IE 7 ]> <html lang="en" class="ie ie7"> <![endif]-->
	<!--[if IE 8 ]> <html lang="en" class="ie ie8"> <![endif]-->
	<!--[if IE 9 ]> <html lang="en" class="ie ie9"> <![endif]-->
	<!--[if (gt IE 9)\|!(IE)]><!--> <html lang="en"> <!--<![endif]-->

	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Hide and Tel</title>
	</head>

	<body>
	<p>Phone numbers wrapped in elements with a class of “tel” won’t have their `tel:` links stripped out. Anything that looks like a phone number but doesn’t have that class will. The alternative is to use a meta tag that disables all `tel:` link generation — which sucks — or to manually add `tel:` links that are useless in most places — which also sucks.</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing <a href="tel: 555-5513" class="tel">555-5513</a> elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <span class="tel">867-5309</span> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat 555-5555, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	<script src="lib/show-and-tel.js"></script>
	</body>
	</html>
	(function() {
	var links = document.getElementsByTagName( "a" );

	for ( var t = 0, a = links.length; t < a; t++ ) {
	var el = links[ t ];

	if( el !== undefined && el.href.indexOf( "tel" ) > -1 ) {
	var parent = el.parentNode,
	num = document.createTextNode( el.textContent );

	if( el.className.indexOf( "tel" ) === -1 && parent.className.indexOf( "tel" ) === -1 ) {
	parent.replaceChild( num, el );
	}
	}
	}
	}());