Custom listing method with custom tags using Javascript

HTML
<cl> <h3>Numbers (num tag) </h3> <num>Listing</num> <num>Listing</num> <num>Listing</num> <num>Listing</num> <num>Listing</num> <h3>Bullets ( bl tag )</h3> <bl>Listing</bl> <bl>Listing</bl> <bl>Listing</bl> <bl>Listing</bl> <bl>Listing</bl> <h3>Asterisk ( ast tag )</h3> <ast>Asterisk</ast> <ast>Asterisk</ast> <ast>Asterisk</ast> <ast>Asterisk</ast> <ast>Asterisk</ast> <h3>Alphabets ( alp and alpu tag )</h3> <alp>Listing</alp> <alp>Listing</alp> <alp>Listing</alp> <alp>Listing</alp> <alp>Listing</alp> <alpu>Listing</alpu> <alpu>Listing</alpu> <alpu>Listing</alpu> <alpu>Listing</alpu> <alpu>Listing</alpu> <h3>Dash and hyphens ( dsh tag and hp tag )</h3> <dsh>Dash</dsh> <dsh>Dash</dsh> <hp>Hyphen</hp> <hp>Hyphen</hp> <h3>Small , curly and big braces ( sb tag , cb tag and bb tag ) </h3> <sb>Listing</sb> <sb>Listing</sb> <cb>Listing</cb> <cb>Listing</cb> <bb>Listing</bb> <bb>Listing</bb> <h3>Single and double arrow (arw tag and darw tag) </h3> <arw>One</arw> <darw>Two</darw> <h3>Equivalent sign tag ( eq tag )</h3> <eq>Eq</eq> <eq>Eq</eq> <eq>Eq</eq> <eq>Eq</eq> <eq>Eq</eq> <h3>Copyright ( cpr tag )</h3> <cpr>Copyright</cpr> </cl>
CSS
cl{ display: block; clear: both; } num,bl,ast,alp,alpu,dsh,arw,darw,cpr,sb,cb,bb,hp,eq{ display: block; }
JAVASCRIPT
var alphabet = 'abcdefghijklmnopqrstuvwxyz'.split(''); //from http://stackoverflow.com/questions/24597634/how-to-generate-an-array-of-alphabet-in-jquery#answer-31755504 function _make(name,type) { var _alpcount = 0; var nl = name.length; for(var j=0;j<name.length;j++){ //name[j].style.display = "block"; var pi = name[j].innerHTML; function _editHtml(lpi,rpi){ name[j].innerHTML = lpi+" "+pi+" "+rpi; } function _al(caseType){ if ( _alpcount <= 25 ) { var _alp = alphabet[_alpcount]; if (caseType == "u"){ _alp = _alp.toUpperCase(); } _editHtml(_alp+".",""); _alpcount++; } if( _alpcount > 25 ){ _alpcount = 0; } } switch(type) { case "num" : _editHtml(j+1+".",""); break; case "bl" : _editHtml("•",""); break; case "ast" : _editHtml("*",""); break; case "alp" : _al("l"); break; case "alpu" : _al("u"); break; case "dsh" : _editHtml("–",""); break; case "arw" : _editHtml("&#155",""); break; case "darw" : _editHtml("»",""); break; case "cpr" : _editHtml("©",""); break; case "sb" : _editHtml("(",")"); break; case "cb" : _editHtml("{","}"); break; case "bb" : _editHtml("[","]"); break; case "hp" : _editHtml("-",""); break; case "eq" : _editHtml("~",""); break; default : break; } } } var cl = document.getElementsByTagName("cl"); function _addTag(tagname){ var subTag = cl[i].getElementsByTagName(tagname); _make(subTag,tagname); } for( var i=0; i<cl.length; i++ ){ //cl[i].style.display = "block"; //cl[i].style.marginBottom = "5px"; // numbers _addTag("num"); //bullets _addTag("bl"); //asterisks _addTag("ast"); //alphabets _addTag("alp"); //lowercase _addTag("alpu"); // uppercase //dash _addTag("dsh"); //arrow single _addTag("arw"); // arrow double _addTag("darw"); //copyright _addTag("cpr"); // small braces ( ) _addTag("sb"); // curly braces { } _addTag("cb"); //big braces [ ] _addTag("bb"); //hyphen _addTag("hp"); //equilavent sign _addTag("eq"); } // © Kushal Neupane https://codepad.co/Asiank
Expand for more options Login