This small code replaces the normal notepad dash -
which is easy to read in a source page or text editor, with a mdash.
It also replaces the pipe symbol with #9474 (a vertical bar).
The code uses a simple, albeit naive, innertext function to keep the space characters in the pre formatted text.
Code:
function innerText(obj){
return obj.innerHTML.replace(/<[\>]*/g,"");
}
var d= document.getElementsByTagName("span");
for(var i=0;i<d.length;i++){
if(d[i].className=="tab"){
d[i].innerHTML = "<pre>"+innerText(d[i]).replace(/\|/g,"│").replace(/-/g,"—")+"</pre>";
}
}
A full example:
Code:
<!doctype html>
<html>
<head>
<title>
Simple Guitar Tabs
</title>
<style type='text/css'>
body {padding-left:300px;background:#959595;}
.tabs, .tabs pre {
color: rgb(0, 0, 0);
background-color: rgb(245, 245, 245);
display: block;
padding: 10px;
clear: both;
font:normal normal 14px/14px Courier new,Andale Mono,Bitstream Vera Sans Mono,OCR A Extended,Lucida Sans Typewriter,Consolas,Lucida Console,Courier,Monospace;
}
.tabs{
width: 650px;
color: rgb(245, 245, 245);
background-color: rgb(65, 65, 65);
border: 10px solid rgb(204, 204, 204);
}
/* comment the next line to remove the border around individual tab staves */
.tabs pre {border: 1px solid rgb(204, 204, 204);}
.tabs pre span {
color:red;
}
.tabs pre span.tab {
color:black;
}
a {display:block;}
p.menu {
width:200px;
background-color: rgb(65, 65, 65);
border:solid 10px #ccc;
padding:10px;
color:#fff;
font-weight:900;
}
p.menu a {color:#fff;font-weight:normal}
.tabs a {display:inline;color:#ccc;}
</style>
</head>
<body>
<a name="top"></a>
<h1>EZ Guitar Solos</h1>
<h5>Tabulation by Nicola Mandorino <a href="http://www.guitarnick.com/easy-guitar-songs-for-absolute-beginners-tab.html">GuitarNick.com</a></h5>
<p class="menu">
Song List
<a href="#brise">Brise</a>
<a href="#jinglebells">Jingle Bells</a>
<a href="#andantino">Andantino<a>
<a href="#surlepont">Sur Le Pont d'Avignon</a>
<a href="#shortninbread">Shortnin Bread</a>
<a href="#happybirthday">Happ Birthday to You</a>
</p>
<a name="brise"></a><a href="#top">top</a>
<p>
<div class="tabs"><h2>Brise (4/4)</h2><a href="http://www.guitarnick.com/brise-easy-guitar-song-for-beginners-tab.html">Tabulation by Nicola Mandorino</a> (mod by rdspoons)<pre><span>
C G7 C
</span><span class="tab">
|--0--0--3--3--|--3--1--1-----|--------1--1--|--1--0--0-----|
|--1-----------|--0-----0-----|--3--3--0-----|--1-----1-----|
|--0-----------|--------0-----|--0-----------|--------0-----|
|--------2-----|--------------|--------------|--------------|
|--3-----------|--2-----------|--------2-----|--3-----3-----|
|--------------|--------3-----|--3-----------|--------------|
</span>
<span>
C G7 C
</span><span class="tab">
|--0--0--3--3--|--3--1--1-----|--------3--3--|--------0-----|
|--1-----------|--------0-----|--3--3--3-----|--1-----1-----|
|--0-----------|--------0-----|--0-----------|--------0-----|
|--------2-----|--------------|--------------|--2-----------|
|--3-----------|--2-----------|--------2-----|--------3-----|
|--------------|--------3-----|--3-----------|--------------|
</span>
</pre></div>
</p>
<a name="jinglebells"></a><a href="#top">top</a>
<p>
<div class="tabs"><h2>Jingle Bells (4/4)</h2><a href="http://www.guitarnick.com/jingle-bells-1-easy-guitar-song-for-beginners.html">Tabulation by Nicola Mandorino</a> (mod by rdspoons)<pre><span>
C
</span><span class="tab">
|--0--0--0-----|--0--0--0-----|--0--3--------|--0-----------|
|--1-----1-----|--1-----------|--1-----1--3--|--1-----------|
|--0-----0-----|--0-----2-----|--0-----0-----|--0-----------|
|--------------|--------------|--------2-----|--------------|
|--3-----------|--3-----------|--3-----------|--3-----3-----|
|--------------|--------------|--------------|--------------|
</span>
<span>
F C D7 G
</span><span class="tab">
|--1--1--1--1--|--1--0--0--0--|--0--------0--|--------3-----|
|--1-----------|--1-----1-----|-----3--3-----|--3-----0-----|
|--------2-----|--------0-----|--2-----2-----|--0-----0-----|
|--3-----------|--------------|--------------|--------------|
|--------------|--3-----3-----|--0-----------|--------2-----|
|--------------|--------------|--------1-----|--3-----------|
</span>
<span>
C
</span><span class="tab">
|--0--0--0-----|--0--0--0-----|--0--3--------|--0-----------|
|--1-----1-----|--1-----------|--1-----1--3--|--1-----------|
|--0-----0-----|--0-----2-----|--0-----0-----|--0-----------|
|--------------|--------------|--------2-----|--------------|
|--3-----------|--3-----------|--3-----------|--3-----------|
|--------------|--------------|--------------|--------3-----|
</span>
<span>
F C G C
</span><span class="tab">
|--1--1--1--1--|--1--0--0--0--|--3--3--1-----|--------0-----|
|--1-----1-----|--1-----1-----|--3-----0--3--|--1-----1-----|
|--2-----2-----|--0-----0-----|--0-----0-----|--------0-----|
|--3-----------|--------------|--------------|--------------|
|--------------|--3-----3-----|--------------|--------3-----|
|--------------|--------------|--3-----------|--------------|
</span>
</pre></div>
</p>
<a name="andantino"></a><a href="#top">top</a>
<p>
<div class="tabs"><h2>Andantino (M. Caracssi) (4/4)</h2><a href="http://www.guitarnick.com/andantino-carcassi-easy-guitar-song-for-beginners.html">Tabulation by Nicola Mandorino</a> (mod by rdspoons)<pre><span>
C G C7 C
</span><span class="tab">
|--------------|--------------|--------------|--------------|
|--1-----1-----|--0-----0-----|--3-----3-----|--1-----1-----|
|-----0-----0--|-----0-----0--|-----0-----0--|-----0-----0--|
|--2-----------|--0-----------|--3-----------|--2-----------|
|--------------|--------------|--------------|--------------|
|--------------|--------------|--------------|--------------|
</span>
<span>
C G7 G C
</span><span class="tab">
|--0-----0-----|--1-----1-----|--------------|--------0-----|
|--------------|--------------|--0-----0-----|--1-----1-----|
|-----0-----0--|-----0-----0--|-----0-----0--|--0-----0-----|
|--------------|--------------|--------------|--2-----------|
|--3-----------|--2-----------|--------------|--3-----------|
|--------------|--------------|--3-----------|--------------|
</span>
</pre></div>
</p>
<a name="surlepont"></a><a href="#top">top</a>
<p>
<div class="tabs"><h2>Sur Le Pont d'Avignon (4/4)</h2><a href="http://www.guitarnick.com/sur-le-pont-davignon-easy-guitar-song-beginners.html">Tabulation by Nicola Mandorino</a> (mod by rdspoons)<pre><span>
C G C Am Dm G
</span><span class="tab">
|--------------|--------------|--0--1--3-----|--------------|
|--1--1--1-----|--3--3--3-----|--1--------1--|--0--1--3-----|
|--0-----0-----|--0-----0-----|--0-----------|-----------0--|
|--2-----------|--0-----------|--------2-----|--0-----------|
|--------3-----|--------2-----|--3-----------|--------2-----|
|--------------|--------------|--------------|--------------|
</span>
<span>
C G C Am G C
</span><span class="tab">
|--------------|--------------|--0--1--3-----|-----------0--|
|--1--1--1-----|--3--3--3-----|--1-----1--1--|--3--0--1--1--|
|--0-----0-----|--0-----0-----|--0-----------|--0-----0--0--|
|--------2-----|--------0-----|--------2-----|--0-----2-----|
|--3-----------|--2-----------|--3-----------|--------3-----|
|--------------|--------------|--------------|--3-----------|
</span>
</pre></div>
</p>
<a name="shortninbread"></a><a href="#top">top</a>
<p>
<div class="tabs"><h2>Shortnin Bread (4/4)</h2><a href="http://www.guitarnick.com/shortnin-bread-easy-guitar-song-beginners-tab.html">Tabulation by Nicola Mandorino</a> (mod by rdspoons)<pre><span>
G D7 G
</span><span class="tab">
|--3--0-----0--|--3--0-----3--|--3--0-----0--|-----------3--|
|--------3-----|--------3--0--|--------3-----|--0--------0--|
|--------------|-----------0--|--------------|-----2--0--0--|
|--------------|--------------|--------------|--0-----------|
|--------2-----|--------------|--------2-----|--------2-----|
|--3-----------|--3-----------|--3-----------|--------------|
</span>
<span>
G D7 G
</span><span class="tab">
|-----0-----0--|-----0-----3--|-----0-----0--|-----------3--|
|--------3-----|--------3--0--|--------3-----|--0--------0--|
|--0-----------|--0-----0--0--|--0-----------|-----2--0--0--|
|--------------|--0-----------|--------------|--0-----------|
|--------2-----|--------2-----|--------------|--------------|
|--3-----------|--3-----------|--3-----------|--------3-----|
</span>
<span>
G D7 G
</span><span class="tab">
|--3--0-----0--|--3--0-----3--|--3--0-----0--|-----------3--|
|--0-----3-----|--0-----3--0--|--0-----3-----|--0--------0--|
|--0-----0-----|--0-----0--0--|--0-----0-----|-----2--0--0--|
|--------------|--------0-----|--------0-----|--0-----------|
|--------2-----|--------2-----|--------2-----|--------------|
|--3-----------|--3-----------|--3-----------|-----------3--|
</span>
</pre></div>
</p>
<a name="happybirthday"></a><a href="#top">top</a>
<p>
<div class="tabs"><h2>Happy Birthday to You (3/4)</h2><a href="http://www.guitarnick.com/happy-birthday-easy-guitar-song-beginners-tab.html">Tabulation by Nicola Mandorino</a> (mod by rdspoons)<pre><span>
C G C
</span><span class="tab">
|-----------|-----------|-----1-----|-----------|-----0-----|
|-----------|--------1--|--0--0-----|--------3--|--1--1-----|
|--------00-|--2--0--0--|-----0--00-|--2--0--0--|-----0--00-|
|--------2--|-----------|--------0--|-----------|--------2--|
|--------3--|--3--3--3--|--------2--|--2--2--2--|--3-----3--|
|-----------|-----------|--3--------|-----------|-----------|
</span>
<span>
C F C G C C7
</span><span class="tab">
|--3--0-----|--------11-|--0--------|-----0-----|-----------|
|--1-----1--|--0-----1--|--1--1--3--|--1--1-----|-----------|
|--0--------|--2--2--2--|--0-----0--|--0--0--0--|--2--0--3--|
|--2--------|--3-----3--|-----------|--2--------|--------2--|
|-----------|-----------|--3--------|--3--------|--------3--|
|-----------|-----------|--------3--|-----------|-----------|
</span>
</pre></div>
</p>
<script type="text/javascript">
function innerText(obj){
return obj.innerHTML.replace(/<[\>]*/g,"");
}
var d= document.getElementsByTagName("span");
for(var i=0;i<d.length;i++){
if(d[i].className=="tab"){
d[i].innerHTML = "<pre>"+innerText(d[i]).replace(/\|/g,"│").replace(/-/g,"—")+"</pre>";
}
}
</script>
</body>
</html>
works with ie,ff,chrome,safari,opera.
Only tested on non-mobile windows platfoms.
Before you post, read our: 
