Wilto/demo.html

## 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>

## 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 );
	}
	}
	}
	}());