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 Coder
    Join Date
    Nov 2005
    Posts
    73
    Thanks
    18
    Thanked 0 Times in 0 Posts

    Remove line breaks from string to use with innerHTML

    I have the following js variable generated by php.

    Code:
    list = 
    <li><a href="link1.htm">Link 1</a></li>
    <li><a href="link2.htm">Link 2</a></li>
    <li><a href="link3.htm">Link 3</a></li>
    ;
    How do I remove the line breaks so that I can use it with innerHTML?

    Something like:

    Code:
    list = remove the line breaks;
    
    function list() {
    document.getElementById("id").innerHTML = list;
    }
    Thanks.

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,355
    Thanks
    11
    Thanked 558 Times in 551 Posts
    First: The quote style `...` is illegal for Javascript

    Second: Even with correct quotes '...' or "...", Javascript strings must not contain unescaped line breaks in the first place. So you cannot just correct this in Javascript, you'll need to correkt that in PHP right away. Which means, you are in the wrong forum :-) You need to either remove the line breaks or escape them using a prepended \ backslash. If I'm not mistaken PHP's "addslashes" might be a good choice to start with.

  • #3
    Banned
    Join Date
    Apr 2011
    Posts
    656
    Thanks
    14
    Thanked 69 Times in 69 Posts
    Do you mean the new line chars at the end of each lne?

    If so, this function is probably what you need:

    Code:
       function removeNewLine(str) {
           var strClean = "";
           for (i=0; i < str.length; i++) {
               if (str.charAt(i) != '\n' &&
                   str.charAt(i) != '\r' &&
                   str.charAt(i) != '\t') {
                   strClean = strClean + str.charAt(i);
               }
        }
        return strClean;
    }

  • #4
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,355
    Thanks
    11
    Thanked 558 Times in 551 Posts
    @webdev1958 I agree if "str" has not been generated as a string literal from PHP in the first place (which is what the OP obviously did)

  • #5
    Banned
    Join Date
    Apr 2011
    Posts
    656
    Thanks
    14
    Thanked 69 Times in 69 Posts
    Quote Originally Posted by devnull69 View Post
    @webdev1958 I agree if "str" has not been generated as a string literal from PHP in the first place (which is what the OP obviously did)
    I don't know where the op's original string came from, hence my question and conditional solution.

  • #6
    New Coder
    Join Date
    Nov 2005
    Posts
    73
    Thanks
    18
    Thanked 0 Times in 0 Posts
    Thanks for your feedback devnull69 and webdev1958.

    I can deliver the variable from php so that it now looks like this:

    Code:
    <script type="text/javascript"> 
    
    list = '<li><a href="link1.htm">Link 1</a></li> /n' +
    '<li><a href="link2.htm">Link 2</a></li> /n' +
    '<li><a href="link3.htm">Link 3</a></li>';
    
    </script>

    If I then go on to run innerHTML without any alteration to the above variable:

    Code:
    <script type="text/javascript"> 
    
    function insertlist() {
    document.getElementById("id").innerHTML = list;
    }
    
    insertlist();
    
    </script>
    It works fine in FF, Safari and Chrome.

    But fails in IE8.
    Message: Object doesn't support this property or method

    Can you help me from here, is it still something to do with the line breaks?

    Thanks.

  • #7
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,355
    Thanks
    11
    Thanked 558 Times in 551 Posts
    If you call insertlist() like that (from the "bare" global scope) you'll have to make sure that the element with id="id" already exists on the page

    You can do this by moving all of your Javascript code to the bottom of the page (right before the </body> tag) or by wrapping it in window.onload
    Code:
    window.onload = function() {
       insertlist();
    }

  • Users who have thanked devnull69 for this post:

    Martins (03-06-2012)

  • #8
    New Coder
    Join Date
    Nov 2005
    Posts
    73
    Thanks
    18
    Thanked 0 Times in 0 Posts
    Thanks devnull69.

    The code was at the end of the page but I added window.onload as you suggested.

    Unfortunately this does not appear to be the source of the problem and I still have the error in IE.

  • #9
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,355
    Thanks
    11
    Thanked 558 Times in 551 Posts
    The problem must be somewhere else in your code

  • #10
    New Coder
    Join Date
    Nov 2005
    Posts
    73
    Thanks
    18
    Thanked 0 Times in 0 Posts
    The problem was having the same name for the 'id' as the 'variable', IE obviously does not like this. I didn't show this in my example, most likely you would have spotted it.

    Thanks anyway for keeping me on track.

    Cheers.


  •  

    Posting Permissions

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