...

View Full Version : Remove line breaks from string to use with innerHTML



Martins
03-06-2012, 11:01 AM
I have the following js variable generated by php.


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:


list = remove the line breaks;

function list() {
document.getElementById("id").innerHTML = list;
}

Thanks.

devnull69
03-06-2012, 11:09 AM
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.

webdev1958
03-06-2012, 11:13 AM
Do you mean the new line chars at the end of each lne?

If so, this function is probably what you need:



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;
}

devnull69
03-06-2012, 11:16 AM
@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)

webdev1958
03-06-2012, 11:21 AM
@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.

Martins
03-06-2012, 03:21 PM
Thanks for your feedback devnull69 and webdev1958.

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


<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:


<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.

devnull69
03-06-2012, 03:36 PM
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


window.onload = function() {
insertlist();
}

Martins
03-06-2012, 03:56 PM
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.

devnull69
03-06-2012, 04:35 PM
The problem must be somewhere else in your code

Martins
03-06-2012, 04:55 PM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum