Posted By

jm1248 on 02/08/11

Tagged

url
links

Versions (?)

Last Edited at 02/08/11 01:09am

Statistics

Viewed 1227 times

Favorited by 0 user(s)

Related snippets

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.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML

<html>
<head>
 <title>Htmlify</title>
 
<script type="text/javascript">
 
function htmlview($text)
{
///////////// Show and tell //////////////
 htmlversion = htmlify($text); // Convert the Test Text to HTML
 raw.value = ""; // Clear the Raw HTML box
 raw.value = htmlversion; // Show the raw HTML from this pass
 Browser_View.innerHTML = raw.value; // Show as a browser would see it.
}
 
 
function htmlify($text)
{
  var tlnk = new Array; //Create an array to hold the potential links
  var hlnk = new Array; //Create an array to hold the HTML translation
 
 // First, translate special characters to HTML
  $text = spchrs2html($text);
 
 // Loop through the clear text 
  var i = 0;
  for (i=0;i<4;i++) // Set ;i<20; to a reasonable limit here
  {
  // Get a potential link and mark where it came from
   $text = $text.replace(/(\S+\.\S+)/,"<"+i+">"); // look for dots that are surrounded by non-whitespace characters
   tlnk[i] = RegExp.$1;
  } // EOLoop
  ac = i;
//?** too many loops - need a break **
 // Loop through the array of potential links and make replacements
  for (i=0;i<ac;i++)
  {
   // If this is a number, (e.g. 6.4sec; $5.00 etc.) OR too short; restore original and skip it
   if (tlnk[i].search(/\d\.\d/)>-1 || tlnk[i].length <5) // Search for digit.digit OR len < 5 in this potential link
   {
    $text = $text.replace("<"+i+">", tlnk[i]);
   }
   else
   {
   // Make this URL into a real link - move brackets and punctuation outside of the anchor tag
   htm = makelink(tlnk[i]);
   $text = $text.replace("<"+i+">", htm);
   }
  }
 
 // Now put the breaks on
  $text = $text.replace(/\n/g,"<br/>");
 // And deal with multiple spaces
  $text = $text.replace(/\ \ /g," &nbsp;");
 // And any other specials
  $text = $text.replace(/"/g,"&quot;");
  $text = $text.replace(/\$/g,"&#36;");
 
  return $text;
}
 
function makelink(txt) // Make a real link from this potential link
{
   txt = html2spchrs(txt); // Undo any html special characters in this link
   var i = 0;
 
 // Clean the front end
   pN = txt.length-1;
   for (i=0;i<pN;i++)
   {
    ch = txt.substr(i,1); // Look at each character
    if (ch.search(/\w/)>-1) break; // Stop looping when a word char is found
   }
   prea = txt.substring(0,i); // Copy the pre anchor stuff
   prea = spchrs2html(prea) // Redo any html special characters in this link
   txt = txt.substr(i); // Trim the preamble from the link
 
 // Clean the trailing end
   for (i=pN;i>0;i--)
   {
   ch = txt.substr(i,1); // Look back at each character
   if (ch.search(/\w|_|-|\//)>-1) break; // Loop until a legal trailing char is found
   }
   posta = txt.substring(i+1); // Copy the post anchor stuff
   posta = spchrs2html(posta) // Redo any html angle bracket codes in this link
 
  turl = txt.substring(0,i+1); // and detach it from the rest - this is the legit URL
 
 // If the URL is an email address, link as a mailto:
  if (turl.search(/@/)>0)
  {
   tlnk = "<a href='mailto:"+turl+"'>"+turl+"</a>";
   return prea+tlnk+posta;
  } 
 // Not a mailto, treat as a document URL
 hurl = ""
  if (turl.search(/\w+:\/\//)<0) hurl = "http://"; // Add http:// if no xxxx:// already there
  tlnk = "<a href='"+hurl+turl+"'>"+turl+"</a>";
 return prea+tlnk+posta;
}
 
function spchrs2html(str)
{
  str = str.replace (/&/g, "&amp;");
  str = str.replace (/</g, "&lt;"); // Convert angle brackets to HTML codes in string
  str = str.replace (/>/g, "&gt;");
  return str;
}
 
function html2spchrs(str)
{
  str = str.replace (/&lt;/g, "<"); // Undo any angle bracket codes in this link
  str = str.replace (/&gt;/g, ">");
  str = str.replace (/&amp;/g, "&");
  return str;
}
 
</script>
</head>
 
<body onload='htmlview(test.value)'>
 
///////////// Show and tell //////////////<br/>
Test Text
<br/>
<textarea id='test' rows='5' cols='60'>
Try this: (http://yoursite.com.) if not, then 
ask Jimmy B <[email protected]?subject=MyProblem> 
the FTP link is ftp://mysite.com/dofuss/.  Did you
see this technews.org/news/wires.html?ref=wett&skin=rat%20fur?
 
</textarea>
<br/><br/>
 
Raw HTML
<br/>
<textarea id='raw' rows='5' cols='90'>
</textarea>
<br/><br/>
 
<b>Browser View</b>
<br/>
<div id='Browser_View'>
</div>
 
<br/>
<h2 style= 'margin-left: 2%; width: 50%; font-family: Verdana; font-size: 1.2em'>Notes:</h2>
<p style= 'margin-left: 4%; width: 50%; font-family: Verdana; font-size: 0.9em';>
Use your browser's View Source function, copy all and paste into a text editor.
Save it as <b>htmlify_reference.html</b> and then as htmlify-1.html for your working copy.
JavaScript can be maddening - a slight mistake anywhere can result in nothing working.
Make sure you have a working version to use as a return point.
<br/><br/>
By all means improve on this project but please post your improvements in this thread.
<br/><br/>
There is no restriction on any legitimate use of this material.  Feel free to spread it
around.
<br/><br/>
John<br/>
</p>
 
</body>
</html>