How to display user inputted line breaks from a textarea value?

Question

I am creating a program with two pages: one for inputting text via textarea into a database as a form , and the other to fetch said data and display it on a textarea . However, submitting text that has indentation in it (as a product of the user hitting the enter button), the page to fetch and display info breaks, and I know why but not how to fix it.

Page to submit form:

<!--Form-->
   <div class="container">
      <form action="/spaceData" method="POST">
            <br>
               <textarea value="" id="textbox" name="usertext" maxlength="100" placeholder="Write your fortune:" onchange="handleChange(this)"></textarea>
            </br>
         </div>
         <div class="container">
            <button type="submit" id="submit" onclick="return handleChange()">Contribute Wisdom</button>
         </div>
      </form>
   </div>

The page to display data is an ejs file which retrieves the text value of a submission as so:

let text = "<%= text %>";

But, for strings with indentation, the variable breaks. For example, say a user inputs the string:

hello
world
!

The ejs file would display the variable as:

let text = "hello
world
!";

This causes the program to break. How do I allow the text variable to detect line breaks?

I thought perhaps I could have the string be iterated over prior to submission and if an indentation is detected it can be replaced with a \\n , but I'm unsure how to implement this or if it would even fix the problem.

Thanks for any advice.

Answer 1

this is cause html and js break lines are working different.

text area send this breaklines when you input them and if you want you enable these linebreaks in you frontend just add this css in the area where you want to render these textarea info for example: into a "p" tag

p {
  white-space: pre-wrap;
}