Solved

Convert Plain Text to HTML

Posted on 2004-04-14
15
1,633 Views
Last Modified: 2008-03-06
I need to have a functionality in my web application that will convert the text in my textarea to HTML code.
It's like the functionality of MS Word when you "Save As.." a document to HTML.
For instance,

TEXTAREA CONTENTS:
Dear Experts,

This is a sample paragraph
in a textarea.

http://www.yahoo.com

AFTER CONVERSION:
<p>Dear Experts,</p>
<p>This is a sample paragraph<br>in a textarea.</p>
<p><A href="http://www.yahoo.com">http://www.yahoo.com</a></p>
0
Comment
Question by:killer5
  • 5
  • 4
  • 3
  • +3
15 Comments
 
LVL 30

Expert Comment

by:third
ID: 10830579
0
 
LVL 1

Author Comment

by:killer5
ID: 10831921
that's exactly the thing i'm doing... the problem is that, it should also support data formatted in plain texts (eg. carriage returns are chr(13) instead of <br>)
0
 
LVL 3

Expert Comment

by:azcn2503
ID: 10832172
I was just playing around and came up with this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
  <meta name="author" content="Aaron Cunnington" />
  <title></title>
  <style type="text/css">
  </style>
  <script type="text/javascript">
   function convert(text){
    text=text.split(" ");msgToDisp="";
    for(i=0;i<text.length;i++){
     if(text[i].indexOf("http:\/\/")==0||text[i].indexOf("www.")==0){text[i]="<a href=\""+text[i]+"\">"+text[i]+"</a>";}
     text[i]=text[i].replace(/\n/g,"<br>");
     if(i!=text.length-1){text[i]+=" ";}
     msgToDisp+=text[i];
    }
    document.getElementById("code").setAttribute("innerText",msgToDisp);
   }
  </script>
 </head>
 <body>
  <textarea style="width:300px;height:200px;" id="code"></textarea><br />
  <input type="button" value="Convert" onclick="convert(document.getElementById('code').getAttribute('innerText'));" />
 </body>
</html>
0
 
LVL 25

Expert Comment

by:devic
ID: 10836537
use <pre> tag
============================
<pre>
hello
new line          more      spaces
      tabs                  more                        tabs
0
 
LVL 3

Expert Comment

by:azcn2503
ID: 10836880
The <pre> tag only changes the text so as every space you do has the same effect as an &nbsp; and sets the text so that the font is a fixed width (based upon your selected fixed width font in your browser settings).
0
 
LVL 12

Expert Comment

by:lil_puffball
ID: 10837841
Here's my script, it handles the <p> tags too:

<script>
function convert(txt,obj){
txt=txt.replace(/\r\n(\s+)?\r\n/gi,"<p>");
txt=txt.split("\n").join("<br>");
txt=txt.replace(/(http:\/\/)?www\.[^\s]+/gi,function(p1){return "<a href=\""+p1+"\">"+p1+"</a>";});
var n=0;
txt=txt.replace(/<p>/gi,function(){n++;var str="\r\n<p>";if(n!=1){str="</p>"+str;}return str;});
if(n!=0){txt+="</p>";}
txt=txt.replace(/<p>.*?<p>/gi,function(p1){return p1+"</p>";});
obj.value=txt;
}
</script>

<form>
<textarea name=content rows=10 cols=100>
Dear Experts,

This is a sample paragraph
in a textarea.

http://www.yahoo.com
</textarea>

<p><input type=button value=Convert onclick="convert(this.form.content.value,this.form.output);">

<p><textarea name=output rows=10 cols=100></textarea>
</form>
0
 
LVL 12

Accepted Solution

by:
lil_puffball earned 125 total points
ID: 10837888
Here is a better version:

<script>
function convert(txt,obj){
  txt="<p>"+txt.split(/\r\n(\s+)?\r\n/).join("</p><p>")+"</p>";
  txt=txt.split("\n").join("<br>");
  txt=txt.replace(/(http:\/\/)?www\.[^\s]+/gi,function(p1){return "<a href=\""+p1+"\">"+p1+"</a>";});
  txt=txt.replace(/(\r|\n|\r\n)/gi,"");
  txt=txt.split("</p><p>").join("</p>\r\n<p>");
  obj.value=txt;
}
</script>

<form>
<textarea name=content rows=10 cols=100>
Dear Experts,

This is a sample paragraph
in a textarea.

http://www.yahoo.com
</textarea>

<p><input type=button value=Convert onclick="convert(this.form.content.value,this.form.output);">

<p><textarea name=output rows=10 cols=100></textarea>
</form>
0
Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

 
LVL 3

Expert Comment

by:azcn2503
ID: 10841372
The link part is still a bit buggy though. But hey, kudo's to you for making it smillions times better than mine.
0
 
LVL 1

Author Comment

by:killer5
ID: 10866242
lil puffball,
could u kindly explain the convert function line by line please :D
0
 
LVL 1

Author Comment

by:killer5
ID: 10866246
cause i'm not familiar with the powerful string manipulation techniques in javascript
thanks!
0
 
LVL 1

Author Comment

by:killer5
ID: 10866252
by the way, some links can start with a different domain like http://mysite.myportal.com; it's not always "www"
if this is not an issue then please disregard this comment :)
0
 
LVL 1

Author Comment

by:killer5
ID: 10866330
I've tested the convert function, but i'm having problems for the hyperlinks.
the function should be able to handle the following cases:

http://www.yahoo.com
http://mail.yahoo.com
https://www.yahoo.com
https://mail.yahoo.com

how can i make it work for these samples?
0
 
LVL 12

Expert Comment

by:lil_puffball
ID: 10871741
Thanks for the points. :)

Here is the new script, see the comments for explanations:

<script>
function convert(txt,obj){
  //this line replaces all double line breaks with a "<p></p>"
  //it also adds a <p> to the beginning and the </p> to the end
  //   \r\n stands for a line break, and \s stands for any empty space
  txt="<p>"+txt.split(/\r\n(\s+)?\r\n/).join("</p><p>")+"</p>";
  //this line replaces all line breaks with a <br>
  txt=txt.split("\n").join("<br>");
  //this line replaces the links
  txt=txt.replace(/((http:\/\/)|(www))\.[^\s]+/gi,function(p1){return "<a href=\""+p1+"\">"+p1+"</a>";});
  //this line replaces all remaining line breaks with an empty space
  txt=txt.replace(/(\r|\n|\r\n)/gi,"");
  //this line adds a line breaks between each paragraph
  txt=txt.split("</p><p>").join("</p>\r\n<p>");
  //this just outputs the new text
  obj.value=txt;
}
</script>
0
 

Expert Comment

by:dirklance
ID: 11147574
hey lil puffball

nice script but i cant seem to get it to work w/ my application.

i'm getting this error:
'undefined' is null or not an object

on the last line of the script.

heres my code
____________________________________________________________

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">


<head>
      <title></title>
<META NAME="Author" CONTENT="?">
<META NAME="Keywords" CONTENT="?">
<META NAME="Description" CONTENT="?">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script type="text/javascript">
function convert(txt,obj){
  //this line replaces all double line breaks with a "<p></p>"
  //it also adds a <p> to the beginning and the </p> to the end
  //   \r\n stands for a line break, and \s stands for any empty space
  txt="<p>"+txt.split(/\r\n(\s+)?\r\n/).join("</p><p>")+"</p>";
  //this line replaces all line breaks with a <br>
  txt=txt.split("\n").join("<br>");
  //this line replaces the links
  txt=txt.replace(/((http:\/\/)|(www))\.[^\s]+/gi,function(p1){return "<a href=\""+p1+"\">"+p1+"</a>";});
  //this line replaces all remaining line breaks with an empty space
  txt=txt.replace(/(\r|\n|\r\n)/gi,"");
  //this line adds a line breaks between each paragraph
  txt=txt.split("</p><p>").join("</p>\r\n<p>");
  //this just outputs the new text
  obj.value=txt;
}

</script>


<style type="text/css">
<!--
a:link {color:;text-decoration:;}
a:visited {color:;text-decoration:;}
a:hover {color:;text-decoration:;}
a:active {color:;text-decoration:;}
body{font-family:verdana;font-size:10px;}

table{
      font-family:verdana;
      font-size:10px;
}

.data{
      border:1px solid #333333;
      font-family:verdana;
      font-size:10px;
}
//-->
</style>
</head>
<body>

<%
      Dim l
      l = request("l")
      If l = "" then
      %>
<form action="addItemForm.asp" method="get" name="form" id="form">
<table>
      <tr>
            <td align="right">Item #: </td>
            <td><input type="number" size="5" maxlength="4" name="productNumber" class="data" /></td>
      </tr>
      <tr>
            <td align="right">Item Name: </td>
            <td><input type="text" name="productName" class="data" /></td>
      </tr>
      <tr>
            <td align="right">Keywords: </td>
            <td><input type="text" name="keywords" size="45" class="data" /></td>
      </tr>
      <tr>
            <td align="right">Notes: </td>
            <td><textarea rows="20" wrap="virtual" cols="50" name="fNotes" class="data" onblur="convert(this.form.fNotes.value,this.form.output);"></textarea></td>
      </tr>
      <tr>
            <td colspan="2" align="center"><input type="hidden" name="l" value="e9098we" /><input type="submit" value="Add Item" style="border:1px solid #333333;color:#333333;background-color:#cccccc;font-size:10px;" /> * all fields required</td>

      </tr>
</table>

</form>


_________________________________________________

thanks for any help.
0
 
LVL 12

Expert Comment

by:lil_puffball
ID: 11327040
Hi dirklance,

You should probably post a new question for this. I would help but I am currently extremely busy with my exams. If you do not get an answer please let me know and I will help you. I will probably be free by next wednesday.
0

Featured Post

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

708 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now