...

View Full Version : parsing line breaks



harbingerOTV
02-01-2007, 05:01 AM
This is proablly more simple then what I've been able to find so I come "home" to ask a question.

I'm making a vaery specialized form to output html code to copy and paste. So far so good and I'm happy with the out come. I know it's a tad bloated but I actually wrote a little bit of it from what I've learned so I'm learning and that's the point.

So what happens is that I present my user with a form where they can slap in all the info and the out come is a copy and paste procedure after that.

In the "content" section, I'm sure there will be a few paragraphs of text being entered sometime, and most likely copied and pasted in. What I would like to happen is the script recognize carrige returns and enter in <br><br> in place of them. This is a wordpress issue so im not sure if closing a p and opening one is going to work right.

anyways here's what i have working:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<head>
<title>|</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script LANGUAGE="JavaScript" type="text/javascript">
function display() {
DispWin = window.open('','NewWin', 'toolbar=no,status=no,width=auto,height=auto,overflow=auto')

if (document.form1.head1.value !=0){
var head1 = "&lt;h4&gt;" + document.form1.head1.value + "&lt;/h4&gt;" + "<br>";
}
else {
var head1 = "";
}
if (document.form1.date.value !=0){
var date = "&lt;li&gt;" + "&lt;b&gt;Date: &lt;/b&gt;" + document.form1.date.value + "&lt;/li&gt;" + "<br>";
}
else {
var date = "";
}
if (document.form1.time.value !=0){
var time = "&lt;li&gt;" + "&lt;b&gt;Time: &lt;/b&gt;" + document.form1.time.value + "&lt;/li&gt;" + "<br>";
}
else {
var time = "";
}
if (document.form1.cost.value !=0){
var cost = "&lt;li&gt;" + "&lt;b&gt;Cost: &lt;/b&gt;" + document.form1.cost.value + "&lt;/li&gt;" + "<br>";
}
else {
var cost = "";
}
if (document.form1.format.value !=0){
var format = "&lt;li&gt;" + "&lt;b&gt;Format: &lt;/b&gt;" + document.form1.format.value + "&lt;/li&gt;" + "<br>";
}
else {
var format = "";
}
if (document.form1.prizes.value !=0){
var prizes = "&lt;li&gt;" + "&lt;b&gt;Prizes: &lt;/b&gt;" + document.form1.prizes.value + "&lt;/li&gt;" + "<br>";
}
else {
var prizes = "";
}
if (document.form1.content.value !=0){
var content = "&lt;p&gt;" + document.form1.content.value + "&lt;/p&gt;" + "<br>";
}
else {
var content = "";
}
if (document.form1.date.value !=0 || document.form1.time.value !=0 || document.form1.cost.value !=0 || document.form1.format.value !=0 || document.form1.prizes.value !=0){
var ulo = "&lt;ul&gt;" + "<br>"
var ulc = "&lt;/ul&gt;" + "<br>";
}
else {
var ulo = ""
var ulc = "";
}


DispWin.document.write(head1 + ulo + date + time + cost + format + prizes + ulc + content);
}
</script>
<style type="text/css">
form, input, textarea {
font: 600 .8em tahoma, verdana, sans-serif;
color: #000;
padding: 4px;
width: 252px;
}
input, textarea {
font-size: 100%;
}
textarea, input {
background: #A4D6EF;
border: 2px solid #182B4F;
width: 240px;
margin: 0 0 8px 0;
}
.sub {
cursor: hand;
width: 100px;
float: left;
font: 600 .8em tahoma, verdana, sans-serif;
}
.sub1 {
cursor: hand;
width: 100px;
float: right;
font: 600 .8em tahoma, verdana, sans-serif;
}
form *:hover, form *:focus {
background: #9d3;
}
.sub:focus, .sub1:focus {
background: #A4D6EF;
}
textarea {
height: 300px;
}
</style>

</head>
<body>
<form name="form1" action="">
Post Title:<br>
<input type="text" name="head1"><br>
Date:<br>
<input type="text" name="date"><br>
Time:<br>
<input type="text" name="time"><br>
Cost:<br>
<input type="text" name="cost"><br>
Format:<br>
<input type="text" name="format"><br>
Prizes:<br>
<input type="text" name="prizes"><br>
Content:<br>
<textarea name="content"></textarea><br>
<input type="submit" value="View Data" class="sub" onClick="display();"><input type="reset" value="Clear Fields" class="sub1"><br>
</form>
</body>
</html>


you type in the fields and it spits out nice code to copy and paste. Again what I want to do now is make the "content" area parse line breaks rather than having to make multiple textareas.

cheers

david_kw
02-01-2007, 05:39 AM
I'm not positive I understand what you are looking for, but here is an attempt. About line 46 you have an if statement for the value of the content textarea. Perhaps change it like this?



if (document.form1.content.value !=0){
var s = document.form1.content.value;
s = s.replace(/\n/gm, "<br/><br/>");
var content = "&lt;p&gt;" + s + "&lt;/p&gt;" + "<br>";
}
else {
var content = "";
}


david_kw

harbingerOTV
02-01-2007, 06:24 AM
actually david, you hit it right on prety much. I changed it to:



if (document.form1.content.value !=0){
var s = document.form1.content.value;
s = s.replace(/\n/gm, "&lt;br&gt;&lt;br&gt;");
var content = "&lt;p&gt;" + s + "&lt;/p&gt;" + "<br>";
}
else {
var content = "";
}


produces an output like:



<p>one line<br><br>two line<br><br>three line<br><br>four line</p>


which works perfect for what I need it to do.

basically if i didnt make my self very clear was that im making a form that you can fil in the blanks and it will output html styled code to copy and paste into a CMS adn it will parse it correctley.

I had previously built a template that they could use for the formatting due to the css, but over the years they have butchered it and things have gone awry. with a form they can just input the info and the form will give them them consistency in the posts.

I looked around a while trying o figure out out differt parsings and
/\n/gm, was what I was missing a real example of.

the thing is now:

if i copy and paste:


basically if i didnt make my self very clear was that im making a form that you can fil in the blanks and it will output html styled code to copy and paste into a CMS adn it will parse it correctley.

I had previously built a template that they could use for the formatting due to the css, but over the years they have butchered it and things have gone awry. with a form they can just input the info and the form will give them them consistency in the posts.

into the comments section, it puts 4 <br> tags in there. My ulmitimate goal is to make a copy and paste like that an a carrige return act like <br><br> .

_Aerospace_Eng_
02-01-2007, 06:43 AM
Then use only one <br> instead.

tonyp12
02-01-2007, 06:52 AM
You sould also take in account that <br> = \r\n

Most text end it's line with carrige return AND new line.

david_kw
02-01-2007, 07:31 AM
Honestly I'm still not sure I know what you want but here is another take where there is an html representation of a line break when a \n is in the test as well as an actual line break.



if (document.form1.content.value !=0){
var s = document.form1.content.value;
s = s.replace(/\n/gm, "&lt;br/&gt;<br/>");
var content = "&lt;p&gt;" + s + "&lt;/p&gt;" + "<br>";
}
else {
var content = "";
}


I'd think this would allow a copy and paste better for what the html should be. As was mentioned by the other posters, you probably only want one line break for each line feed (\n). The carriage return (\r) you can probably ignore since html will filter it out anyway.

Plus the code puts an actual <br/> in that shows visually in the browser that the line break is there. I still feel like I'm guessing though. :) Regardless, hopefully it helps you towards what you need.

david_kw

_Aerospace_Eng_
02-01-2007, 04:17 PM
You really can't ignore the \r\n stuff. IE uses \r\n while other browsers use \n.

liorean
02-01-2007, 04:22 PM
You really can't ignore the \r\n stuff. IE uses \r\n while other browsers use \n.
str=str.replace(/\u000d[\u000a\u0085]|[\u0085\u2028\u000d\u000a]/g,'\n');After that, you can :)

david_kw
02-01-2007, 04:53 PM
You really can't ignore the \r\n stuff. IE uses \r\n while other browsers use \n.

I'm not sure why not in this situation. The HTML display ignores excess white space and treats it as " ". And both systems use the \n. So if you have

var s = "Before line break\r\nAfter";
s = s.replace(/\n/gm, "<br/>");
such that s is "Before line break\r<br/>After"

or

var s = "Before line break\nAfter";
s = s.replace(/\n/gm, "<br/>");
such that s is "Before line break<br/>After"

in either case it will show



Before line break
After


So I guess I don't understand. Considering the situation, why do you feel the \r can't be ignored?

david_kw

glenngv
02-01-2007, 05:01 PM
Why not put the whole text inside the <pre></pre> tags so that all the whitespaces are preserved and you don't have to replace linebreaks with <br />?

harbingerOTV
02-03-2007, 03:05 AM
Man, thanks for the discussion and the help.

david, I used your second solution and it appers that it does exactly what I need it to do. I havent been able to break it yet. Many thanks.

glenn, I thought at first, that the pre tag would be perfect, but after tryign it out I realized that it wasn't the way to go. the out put is going on a liquid layout site adn a real wide block of text is going to destroy it if in a pre tag.

so this is the code I'm using so far if anyone wants to play with it.




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<head>
<title>|</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script LANGUAGE="JavaScript" type="text/javascript">
function display() {
DispWin = window.open('','NewWin', 'toolbar=no,status=no,width=auto,height=auto,overflow=auto,scrollbars=yes,resizable=yes')

if (document.form1.head1.value !=0){
var head1 = "&lt;h4&gt;" + document.form1.head1.value + "&lt;/h4&gt;" + "<br>";
}
else {
var head1 = "";
}
if (document.form1.titleradio.checked){
var head1 = "&lt;h4&gt;" + "&lt;a href=&quot;" + document.form1.headlink.value +"&quot;&gt;" + document.form1.head1.value + "&lt;/a&gt;" + "&lt;/h4&gt;" + "<br>";
}
else {
var nada = "";
}
if (document.form1.pic.value !=0){
var pic = "&lt;img src=&quot;" + document.form1.pic.value + "&quot;&gt;" + "<br>";
}
else {
var pic = "";
}
if (document.form1.piclink.checked){
var pic = "&lt;a href=&quot;" + document.form1.picaddy.value + "&quot;&gt;" + "&lt;img src=&quot;" + "imagedump/" + document.form1.pic.value + "&quot;&gt;" + "&lt;/a&gt;" + "<br>";
}
else {
var nada = "";
}
if (document.form1.date.value !=0){
var date = "&lt;li&gt;" + "&lt;b&gt;Date: &lt;/b&gt;" + document.form1.date.value + "&lt;/li&gt;" + "<br>";
}
else {
var date = "";
}
if (document.form1.time.value !=0){
var time = "&lt;li&gt;" + "&lt;b&gt;Time: &lt;/b&gt;" + document.form1.time.value + "&lt;/li&gt;" + "<br>";
}
else {
var time = "";
}
if (document.form1.cost.value !=0){
var cost = "&lt;li&gt;" + "&lt;b&gt;Cost: &lt;/b&gt;" + document.form1.cost.value + "&lt;/li&gt;" + "<br>";
}
else {
var cost = "";
}
if (document.form1.format.value !=0){
var format = "&lt;li&gt;" + "&lt;b&gt;Format: &lt;/b&gt;" + document.form1.format.value + "&lt;/li&gt;" + "<br>";
}
else {
var format = "";
}
if (document.form1.prizes.value !=0){
var prizes = "&lt;li&gt;" + "&lt;b&gt;Prizes: &lt;/b&gt;" + document.form1.prizes.value + "&lt;/li&gt;" + "<br>";
}
else {
var prizes = "";
}


if (document.form1.content.value !=0){
var s = document.form1.content.value;
s = s.replace(/\n/gm, "&lt;br/&gt;<br/>");
var content = "&lt;p&gt;" + s + "&lt;/p&gt;" + "<br>";
}
else {
var content = "";
}


if (document.form1.date.value !=0 || document.form1.time.value !=0 || document.form1.cost.value !=0 || document.form1.format.value !=0 || document.form1.prizes.value !=0){
var ulo = "&lt;ul&gt;" + "<br>"
var ulc = "&lt;/ul&gt;" + "<br>";
}
else {
var ulo = ""
var ulc = "";
}


DispWin.document.write(head1 + ulo + date + time + cost + format + prizes + ulc + content);
}

function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'none')
e.style.display = 'block';
else
e.style.display = 'none';
}

</script>
<style type="text/css">
form, input, textarea {
font: 600 .8em tahoma, verdana, sans-serif;
color: #000;
padding: 4px;
width: 252px;
}
i {
font: 600 italic .7em tahoma, verdana, sans-serif;
}
input, textarea {
font-size: 100%;
}
textarea, input {
background: #A4D6EF;
border: 2px solid #182B4F;
width: 240px;
margin: 0 0 8px 0;
}
.check {
width: 20px;
height: 20px;
border-color: #fff;
background: #fff;
float: left;
}
.sub {
cursor: hand;
width: 100px;
float: left;
font: 600 .8em tahoma, verdana, sans-serif;
}
.sub1 {
cursor: hand;
width: 100px;
float: right;
font: 600 .8em tahoma, verdana, sans-serif;
}
textarea {
height: 250px;
}
.fl {
float: left;
width: 25%;
}
br {
clear: left;
}
</style>

</head>
<body>
<form name="form1" action="">
Post Title:<br>
<input type="text" name="head1"><br>
Is the title a link?<br>
<span class="fl"><input type="radio" onclick="toggle_visibility('h4link');" class="check" name="titleradio">Yes</span>
<br>
<div id="h4link" style="display: none;">
Heading Link:<br>
<i>http://www.example.com</i><br>
<input name="headlink">
</div>
Post Image:<br>
<i>whatever.jpg (.gif, .jpg, .bmp, etc...)</i><br>
<input type="text" name="pic"><br>
Is the image a link?<br>
<span class="fl"><input type="radio" onclick="toggle_visibility('picboxlink');" class="check" name="piclink">Yes</span>
<br>
<div id="picboxlink" style="display: none;">
Image Link:<br>
<i>http://www.example.com</i><br>
<input name="picaddy">
</div>

Date:<br>
<input type="text" name="date"><br>
Time:<br>
<input type="text" name="time"><br>
Cost:<br>
<input type="text" name="cost"><br>
Format:<br>
<input type="text" name="format"><br>
Prizes:<br>
<input type="text" name="prizes"><br>
Content:<br>
<textarea name="content"></textarea><br>
<input type="submit" value="View Data" class="sub" onClick="display(), history.go(0);"><input type="reset" value="Clear Fields" class="sub1"><br>
</form>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum