Text to HTML in JavaScript


/ Published in: JavaScript
Save to your folder(s)

Hopefully this covers just about everything. This code has far more lines than htmlify.js but seems to work ok.

(I just remembered that " // Loop through the clear text " has no loop breaker - will post a fix, but it's not a show-stopper for most applications.)

As far as I can tell;

brackets are dealt with properly
punctuation is moved away from the link.

This script is actually an HTML document that contains test
patterns with raw and browser-view outputs.

Comments are welcome.


Copy this code and paste it in your HTML
  1. <html>
  2. <head>
  3. <title>Htmlify</title>
  4.  
  5. <script type="text/javascript">
  6.  
  7. function htmlview($text)
  8. {
  9. ///////////// Show and tell //////////////
  10. htmlversion = htmlify($text); // Convert the Test Text to HTML
  11. raw.value = ""; // Clear the Raw HTML box
  12. raw.value = htmlversion; // Show the raw HTML from this pass
  13. Browser_View.innerHTML = raw.value; // Show as a browser would see it.
  14. }
  15.  
  16.  
  17. function htmlify($text)
  18. {
  19. var tlnk = new Array; //Create an array to hold the potential links
  20. var hlnk = new Array; //Create an array to hold the HTML translation
  21.  
  22. // First, translate special characters to HTML
  23. $text = spchrs2html($text);
  24.  
  25. // Loop through the clear text
  26. var i = 0;
  27. for (i=0;i<4;i++) // Set ;i<20; to a reasonable limit here
  28. {
  29. // Get a potential link and mark where it came from
  30. $text = $text.replace(/(\S+\.\S+)/,"<"+i+">"); // look for dots that are surrounded by non-whitespace characters
  31. tlnk[i] = RegExp.$1;
  32. } // EOLoop
  33. ac = i;
  34. //?** too many loops - need a break **
  35. // Loop through the array of potential links and make replacements
  36. for (i=0;i<ac;i++)
  37. {
  38. // If this is a number, (e.g. 6.4sec; $5.00 etc.) OR too short; restore original and skip it
  39. if (tlnk[i].search(/\d\.\d/)>-1 || tlnk[i].length <5) // Search for digit.digit OR len < 5 in this potential link
  40. {
  41. $text = $text.replace("<"+i+">", tlnk[i]);
  42. }
  43. else
  44. {
  45. // Make this URL into a real link - move brackets and punctuation outside of the anchor tag
  46. htm = makelink(tlnk[i]);
  47. $text = $text.replace("<"+i+">", htm);
  48. }
  49. }
  50.  
  51. // Now put the breaks on
  52. $text = $text.replace(/\n/g,"<br/>");
  53. // And deal with multiple spaces
  54. $text = $text.replace(/\ \ /g," &nbsp;");
  55. // And any other specials
  56. $text = $text.replace(/"/g,"&quot;");
  57. $text = $text.replace(/\$/g,"&#36;");
  58.  
  59. return $text;
  60. }
  61.  
  62. function makelink(txt) // Make a real link from this potential link
  63. {
  64. txt = html2spchrs(txt); // Undo any html special characters in this link
  65. var i = 0;
  66.  
  67. // Clean the front end
  68. pN = txt.length-1;
  69. for (i=0;i<pN;i++)
  70. {
  71. ch = txt.substr(i,1); // Look at each character
  72. if (ch.search(/\w/)>-1) break; // Stop looping when a word char is found
  73. }
  74. prea = txt.substring(0,i); // Copy the pre anchor stuff
  75. prea = spchrs2html(prea) // Redo any html special characters in this link
  76. txt = txt.substr(i); // Trim the preamble from the link
  77.  
  78. // Clean the trailing end
  79. for (i=pN;i>0;i--)
  80. {
  81. ch = txt.substr(i,1); // Look back at each character
  82. if (ch.search(/\w|_|-|\//)>-1) break; // Loop until a legal trailing char is found
  83. }
  84. posta = txt.substring(i+1); // Copy the post anchor stuff
  85. posta = spchrs2html(posta) // Redo any html angle bracket codes in this link
  86.  
  87. turl = txt.substring(0,i+1); // and detach it from the rest - this is the legit URL
  88.  
  89. // If the URL is an email address, link as a mailto:
  90. if (turl.search(/@/)>0)
  91. {
  92. tlnk = "<a href='mailto:"+turl+"'>"+turl+"</a>";
  93. return prea+tlnk+posta;
  94. }
  95. // Not a mailto, treat as a document URL
  96. hurl = ""
  97. if (turl.search(/\w+:\/\//)<0) hurl = "http://"; // Add http:// if no xxxx:// already there
  98. tlnk = "<a href='"+hurl+turl+"'>"+turl+"</a>";
  99. return prea+tlnk+posta;
  100. }
  101.  
  102. function spchrs2html(str)
  103. {
  104. str = str.replace (/&/g, "&amp;");
  105. str = str.replace (/</g, "&lt;"); // Convert angle brackets to HTML codes in string
  106. str = str.replace (/>/g, "&gt;");
  107. return str;
  108. }
  109.  
  110. function html2spchrs(str)
  111. {
  112. str = str.replace (/&lt;/g, "<"); // Undo any angle bracket codes in this link
  113. str = str.replace (/&gt;/g, ">");
  114. str = str.replace (/&amp;/g, "&");
  115. return str;
  116. }
  117.  
  118. </script>
  119. </head>
  120.  
  121. <body onload='htmlview(test.value)'>
  122.  
  123. ///////////// Show and tell //////////////<br/>
  124. Test Text
  125. <br/>
  126. <textarea id='test' rows='5' cols='60'>
  127. Try this: (http://yoursite.com.) if not, then
  128. ask Jimmy B <[email protected]?subject=MyProblem>
  129. the FTP link is ftp://mysite.com/dofuss/. Did you
  130. see this technews.org/news/wires.html?ref=wett&skin=rat%20fur?
  131.  
  132. </textarea>
  133. <br/><br/>
  134.  
  135. Raw HTML
  136. <br/>
  137. <textarea id='raw' rows='5' cols='90'>
  138. </textarea>
  139. <br/><br/>
  140.  
  141. <b>Browser View</b>
  142. <br/>
  143. <div id='Browser_View'>
  144. </div>
  145.  
  146. <br/>
  147. <h2 style= 'margin-left: 2%; width: 50%; font-family: Verdana; font-size: 1.2em'>Notes:</h2>
  148. <p style= 'margin-left: 4%; width: 50%; font-family: Verdana; font-size: 0.9em';>
  149. Use your browser's View Source function, copy all and paste into a text editor.
  150. Save it as <b>htmlify_reference.html</b> and then as htmlify-1.html for your working copy.
  151. JavaScript can be maddening - a slight mistake anywhere can result in nothing working.
  152. Make sure you have a working version to use as a return point.
  153. <br/><br/>
  154. By all means improve on this project but please post your improvements in this thread.
  155. <br/><br/>
  156. There is no restriction on any legitimate use of this material. Feel free to spread it
  157. around.
  158. <br/><br/>
  159. John<br/>
  160. </p>
  161.  
  162. </body>
  163. </html>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.