2

I have a for loop in which I am printing out content on a web page. Anything with a line break in the database will not work with innerHTML.

Here is the process of how to get a string from the db:
1. Submit a form with text thats gets queried into the database.
2. For loop which displays all the contents in the database using an array, say $content[i].

value.innerHTML works with any strings that don't have a line break.
For example, in the db:
Hello
there
----- Will not work.
Hello there
----- Will work.
I have tried using regexes to get a line break and change them to br and such, but inner html will not display content with line breaks. Only those without.

My code that I am using:

var commentSection = document.createElement("div");
var str = '<?php echo $comment['contents'];?>';
str = str.replace(/\r\n?|\n/g, '<br />');
var userCommentData = document.createElement("div");
userCommentData.innerHTML = str;
commentSection.appendChild(userCommentData);

And a more clearer picture of the error I am having:
A step of a query string

apples99
  • 33
  • 4
  • Perhaps you could split the text by newlines and insert a paragraph for each item in the list instead? – kristofferostlund May 13 '17 at 07:39
  • Something like this? https://codepen.io/kristofferostlund/pen/KmRQrW – kristofferostlund May 13 '17 at 07:45
  • So what you are saying is that I should loop through the string and do content.innerHTML += someline? Is there perhaps a more efficient way to do this? – apples99 May 13 '17 at 07:49
  • @kristofferostlund To understand correctly, what you are doing is you are looping through the string you have and appending them to innerHTML? In my case, I could just do innerHTML+= str since I want it all to be under one div essentially as I am not using a paragraph. – apples99 May 13 '17 at 07:52
  • Not really, for each line I'm inserting a `

    ` with their respective innerHTML as their line. I.E. `

    line 1

    line 2

    `. But it may not really be what you're looking for?
     – kristofferostlund May 13 '17 at 09:14
  • Oh, a way you could actually retain the exact formatting is to style the div with `white-space: pre`, I've update the pen with this: https://codepen.io/kristofferostlund/pen/KmRQrW – kristofferostlund May 13 '17 at 09:16

2 Answers2

2

Use following functions:

  • htmlentities:Convert all applicable characters to HTML entities
  • nl2br Inserts HTML line breaks before all newlines in a string

Or maybe change your sql query with TRIM function as used in link

Community
  • 1
  • 1
Yashar Aliabbasi
  • 2,663
  • 1
  • 23
  • 35
  • Hi Yashar, I do use htmlspecialchars() before a text is put in the database. I have also tried nl2br with no effect. I know that innerHTML doesn't like new lines, do you have any other suggestions? – apples99 May 13 '17 at 07:47
  • I added to my answer – Yashar Aliabbasi May 13 '17 at 07:49
  • Ok this was the answer. I TRIM the content before putting the query in. This is a temporary fix as I now need to figure out how to add line breaks in, because this simply removes all new lines and puts it in a long line, where essentially I'd like to see paragraphs clearly separated. – apples99 May 13 '17 at 08:15
  • It's glad for you and me ;) – Yashar Aliabbasi May 13 '17 at 08:22
1

Use backtick character ( ` ) for multiline string in javascript.

use this line { Replace backtick with ( ` ) }

var str = backtick <?php echo $comment['contents'];? > backtick ;

insted of this line

var str = '<?php echo $comment['contents'];? >';

Samadhi Sri Udara Wijenayake
  • 135
  • 1
  • 4