Solved

Convert Plain Text to HTML

Posted on 2004-04-14
15
1,657 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

Salesforce Has Never Been Easier

Improve and reinforce salesforce training & adoption using WalkMe's digital adoption platform. Start saving on costly employee training by creating fast intuitive Walk-Thrus for Salesforce. Claim your Free Account Now

Question has a verified solution.

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

Suggested Solutions

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
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…

710 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