Posted By

jm1248 on 02/08/11


Tagged

url links to make htmlify textify linkify


Versions (?)

Text to HTML in JavaScript


 / Published in: JavaScript
 

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.

  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
Posted By: naren1012 on February 9, 2011

Tested this regex..and it works for almost all cases except these two cases Add these two lines of text to test() method and run the script .. $text = $text+"Test Link! " $text = $text+"ftp://ftp.funet.fi/pub/standards/RFC/rfc959.txt "

I guess a href test case is beyond scope of regex. But I guess ftp case is fixable.

Thanks for the excellent script though!!

Posted By: naren1012 on February 9, 2011

Found another issue with this regex.. to test add this line in test() method. $text= $text+"yoursite.com..if" Here '..if' also gets included in the link.

You need to login to post a comment.