Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Problem with innerHTML and Carriage Returns

    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:
    Code:
    a
    b
    ^That is EXACTLY as it is in the database.
    An image (just to be more clear):


    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

  • #2
    Senior Coder
    Join Date
    Sep 2010
    Posts
    2,030
    Thanks
    15
    Thanked 240 Times in 240 Posts
    Code:
    	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.

  • #3
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by DrDOS View Post
    Code:
        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

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Code:
    <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.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #5
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Philip M View Post
    Code:
    <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 :/

  • #6
    New Coder
    Join Date
    Jun 2012
    Posts
    80
    Thanks
    0
    Thanked 18 Times in 18 Posts
    I'm familiar to split them first and merge them later since I usually has to do something with each line.

    Code:
    <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);
    }

  • #7
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    That can be shortened to:

    Code:
    <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.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,919
    Thanks
    79
    Thanked 4,423 Times in 4,388 Posts
    Not to ask a silly question, but...

    what is the real difference between
    Code:
    ReText = Text.split(/(\r\n|\n)/g).join("<br />");
    and
    Code:
    ReText = Text.replace(/(\r\n|\n)/g, "<br />");
    ???

    And by the by...if you are going to be complete about it, why not
    Code:
    ReText = Text.replace(/(\r\n?|\n)/g, "<br />");
    so that \n or \r\n or just \r gets replaced?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #9
    New Coder
    Join Date
    Jul 2012
    Location
    Ukraine
    Posts
    71
    Thanks
    1
    Thanked 18 Times in 17 Posts
    You can use the CSS property white-space: pre-line to preserve all line breaks in the text.
    Example:
    Code:
    <p style="white-space: pre-line">All line
    breaks
    are preserved</p>
    Last edited by oneguy; 07-17-2012 at 01:55 AM.

  • #10
    New Coder
    Join Date
    Jun 2012
    Posts
    80
    Thanks
    0
    Thanked 18 Times in 18 Posts
    @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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •