Solved

Convert Plain Text to HTML

Posted on 2004-04-14
15
1,650 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
Active Directory Webinar

We all know we need to protect and secure our privileges, but where to start? Join Experts Exchange and ManageEngine on Tuesday, April 11, 2017 10:00 AM PDT to learn how to track and secure privileged users in Active Directory.

 
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
 
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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
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…

831 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