...

View Full Version : Problem with innerHTML and Carriage Returns



Mko_
07-14-2012, 09:18 PM
Hey all,
I'm recently revising an old piece of .js code and trying to add some new features to it. However, I've encountered a bit of a roadblock and am absolutely puzzled as to how to fix it.

Let's start off with the code:
http://paste2.org/p/2073301#line-549
As you can see, I'm already modifying the variable RULES on line 549 to change all <br /> tags to be \n.

Now, the RULES var is called from an option in a setting on my Forum. In this setting, as you can probably guess, you can input a description of your rules that will display.

However, when the following contents are saved (and in turn saved in my database), this is displayed:

a
b^That is EXACTLY as it is in the database.
An image (just to be more clear):
http://i.imgur.com/GKlz8.png

Now, as you can see, there's clearly a carriage return after the 'a'.
If this bit of text is put into the setting on my Forum (mentioned earlier), my shoutbox will not work, will not load, and will not display the Shoutbox Rules tab, as depicted below:
http://i.imgur.com/OGsG1.png

Basically, what I need is either:
a) code that will ignore carriage returns or change them into <br /> tags
b) a fix for any JavaScript that may not be up-to-date and that will allow carriage returns to be interpreted as-is

Any and all help is welcomed!

Thanks,
Mark

DrDOS
07-14-2012, 10:16 PM
var thetext = thetext.replace(/\t/g,'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;').replace(/ /g,'&nbsp;').replace(/\r\n/g, '<br \/>').replace(/\n/g, '<br \/>').replace(/\r/g, '<br\/>');


That's a line of code that I use on one of my pages, it converts text that people have typed into a textbox into HTML, it has so many break tags because different OSes format CR in different ways.

Mko_
07-14-2012, 10:38 PM
var thetext = thetext.replace(/\t/g,'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;').replace(/ /g,'&nbsp;').replace(/\r\n/g, '<br \/>').replace(/\n/g, '<br \/>').replace(/\r/g, '<br\/>');

That's a line of code that I use on one of my pages, it converts text that people have typed into a textbox into HTML, it has so many break tags because different OSes format CR in different ways.
Thanks for that!
Though, I still have my problem :c

Philip M
07-15-2012, 10:39 AM
<script type = "text/javascript">
var str = "This is a string.\nThis is a long string.\nAnd yet another long string";
alert (str); // Javascript
str = str.replace(/(\r\n|\n)/g, "<br>");
document.write(str); // HTML
</script>

All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

Mko_
07-15-2012, 12:30 PM
<script type = "text/javascript">
var str = "This is a string.\nThis is a long string.\nAnd yet another long string";
alert (str); // Javascript
str = str.replace(/(\r\n|\n)/g, "<br>");
document.write(str); // HTML
</script>All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.
Didn't work.
The shoutbox doesn't load because of the problem, still :/

Richter
07-16-2012, 08:42 AM
I'm familiar to split them first and merge them later since I usually has to do something with each line.



<textarea id="InputBox"></textarea>
<button id="SMDT">Summit</button>

SMDT.addEventListener("click", function () {

var ReText, Text = InputBox.value;

switch(true){
case Text.indexof("\r\n") > -1:
ReText = Text.split("\r\n").join("<br />")
break;

case Text.indexof("\n") > -1:
ReText = Text.split("\n").join("<br />")
break;

default:
alert("Not found any carriage in this text file.");
break;
}

alert(Text);
}

felgall
07-16-2012, 08:58 AM
That can be shortened to:


<textarea id="InputBox"></textarea>
<button id="SMDT">Summit</button>

SMDT.addEventListener("click", function () {

var ReText, Text = InputBox.value;
ReText = Text.split(/(\r\n|\n)/g).join("<br />")
alert(Text);
}

split will accept a regular expression. Of course you are probably more interested in the value of ReText at the end rather than Text.

Old Pedant
07-17-2012, 12:35 AM
Not to ask a silly question, but...

what is the real difference between


ReText = Text.split(/(\r\n|\n)/g).join("<br />");

and


ReText = Text.replace(/(\r\n|\n)/g, "<br />");

???

And by the by...if you are going to be complete about it, why not

ReText = Text.replace(/(\r\n?|\n)/g, "<br />");

so that \n or \r\n or just \r gets replaced?

oneguy
07-17-2012, 02:51 AM
You can use the CSS property white-space: pre-line to preserve all line breaks in the text.
Example:


<p style="white-space: pre-line">All line
breaks
are preserved</p>

Richter
07-17-2012, 04:47 AM
@Old Pedant
I usually has something to do with the line after split line before join them back so I use split function as common and sometime I got sometime abnormal result from replace function when I try to replace "\r\n" like it's not found "\r\n" in string :(



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum