Preserving new lines and spaces in text area not working

Question

I am using text area to enter text and on form submit, the text displayed in the view is not retaining any line breaks and spaces.

Text area:

<textarea type="text" id="topicDetails"></textarea>

Tried replacing text using the following:

postTopic(){
    var content = document.getElementById('topicDetails').value;
//            textcontent = content.replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '$1'+ "" +'$2'); 
//            textcontent = content.replace("\r\n", "\\r\\n"); 
//            textcontent = content.replace(/\r?\n/g, '<br />');
//            textcontent = content.replace(/\r?\n/g, '&#13');
//            var breakTag = (is_xhtml || typeof is_xhtml === 'undefined') ? '<br />' : '<br>';
//            textcontent = (content + '').replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '$1' + breakTag + '$2');
    textcontent = content.replace(/\n/g,"<br>")

    var topic = {
        "topicId" : new Date().getTime(),
        "title": document.getElementById('title').value,
        "details": textcontent,
        "username": DataMixin.data.username,
        "userImage": "assets/img/Logos Divine Light/6.png",
        "dayPosted": new Date().toLocaleString()
    }

    console.log('posting blog..... ', topic);
    self.data.blogTopicsArr.push(topic);

    $.ajax({
        url: "/new_topic",
        type: "POST",
        data: JSON.stringify(self.data.blogTopicsArr),
        contentType: "application/json",
        success: function (res) {
            console.log('res is ', res);
            if (res == 'Authentication failed'){
                self.data.blogTopicsArr.splice( - 1, 1);
                self.update(self.data.blogTopicsArr);
                riot.route("signup_popup");
            } else if (res == 'saved'){
                console.log('blog posted successfully: ', self.data.blogTopicsArr);
                document.getElementById('title').value = '';
                document.getElementById('topicDetails').value = '';
                self.update();
            } else if (typeof res.redirect == 'string'){
                console.log('res.redirect ', res.redirect);
                riot.route(res.redirect)
            }
        },
        error: function (err) {
        console.log('err>>>>', err);
        }
    });
    $('#myModal').modal('hide');
}

Tried three different ways with no luck.

The third approach gives the output with   tags. How do I preserve new lines?

Output is:

Lorem Ipsum is simply dummy text.<br /> Industry's standard text ever since the 1500s, <br /><br />Why do we use it?<br />It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. <br /><br />

Update:

After successful form post, I am updating the view using riot's self.update(); or this.update()

Update2

Actually I am sending the form data to database and fetching the text back from database to render it. But the text sent to DB has   tag inserted before saving it in DB so why it displays text as Lorem Ipsum is simply dummy text. Industry's standard text ever since the 1500s,  ??

@ZakariaAcharki As mentioned in title, I want to preserve new lines and white spaces inside text. I am using textarea to enter text and on submit, the white space or new lines are not preserved — kittu, Feb 07 '17 at 15:39
@ÁlvaroGonzález I am just posting a form to server. I am using riotjs. I am guessing if this is riotjs issue? — kittu, Feb 07 '17 at 15:55
silly question but did you try: postTopic(){ var content = document.getElementById('topicDetails').value; var topic = { "details": content , } } — Chris Lamothe, Feb 07 '17 at 15:58
@ÁlvaroGonzález Ok I am updating the question now with more code so you will get an idea. I am just updating the view after form post — kittu, Feb 07 '17 at 16:04
@ÁlvaroGonzález Actually you are right. I am sending the text to Database and fetching it again to show the text in the view. But fetching the text that contains `
` should render it correctly right — kittu, Feb 07 '17 at 16:11
@ÁlvaroGonzález I guess I need to convert it back to `string.replace(/
/gi, '\n') : "";` — kittu, Feb 07 '17 at 16:23
@ÁlvaroGonzález from database I got the text as `Sample1 Sample1 Sample1

Sample1
Sample1` and I tried converting to new line like `res.details = res.details.replace(/\s?(
)\s?/g, "\r\n"); self.data.post_details = res;` — kittu, Feb 07 '17 at 16:40

kittu · Answer 1 · 2017-02-08T16:04:30.543

4

Actually I all had to was add pre-wrap like below.

<p style="white-space: pre-wrap;">{data.post_details.details}</p>

This retained the spacing with new lines as well.

edited Feb 08 '17 at 16:04

answered Feb 07 '17 at 16:46

kittu

6,662
21
91
185

score 1 · Answer 2 · answered Feb 07 '17 at 15:48

1

You can just replace the newlines with   using this .replace(/\n/g," ")

function postTopic() {
  var content = document.getElementById('topicDetails').value;

  var textcontent = content.replace(/\n/g,"<br>");

  var topic = {
    "details": textcontent,
  }
}

answered Feb 07 '17 at 15:48

Parvez Rahaman

4,269
3
22
39

Still the output is like this: `asdasd
asd
asd

asd` – kittu Feb 07 '17 at 15:53

Michael Rodriguez · Answer 3 · 2017-02-07T16:07:41.380

0

You could simply handle this when you process the form on the server side. For instance, if your form action is set to "companyForm.php" then in your companyForm.php you could use a function like nl2br, such as:

$companyName = nl2br($_POST['companyName']);

http://php.net/manual/en/function.nl2br.php

If for whatever reason you absolutely must do this on the client side, you could use nl2br on php.js by adding this:

function nl2br (str, is_xhtml) {

    if (typeof str === 'undefined' || str === null) {
        return ''
    }

    var breakTag = (is_xhtml || typeof is_xhtml === 'undefined') ? '<br />' : '<br>';
    return (str + '').replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '$1' + breakTag + '$2');
}

Then use:

nl2br(textcontent, false)

edited Feb 07 '17 at 16:07

answered Feb 07 '17 at 15:41

Michael Rodriguez

2,142
1
9
15

But I am not sending the text directly to server. I am calling a function called `postTopic()` which calls ajax to send text to server. – kittu Feb 07 '17 at 15:43
My edit is in case he needs to use JS. My original answer was just suggesting that this type of thing is typically handled on the server side. I still think he's got the workflow wrong. Even if the postTopic function sends the text field data to the server with an AJAX call, you'd be able to convert the white space on the server side. – Michael Rodriguez Feb 07 '17 at 15:48
But he explicitly says the
tag isn't working? – Simon Visser Feb 07 '17 at 15:51
Uncaught ReferenceError: is_xhtml is not defined – kittu Feb 07 '17 at 15:51
Some browsers don't handle the null reference well. Please see my recent edit. – Michael Rodriguez Feb 07 '17 at 15:55
If I use `is_xhtml || typeof is_xhtml == 'null'` with double equals checks for both I guess – kittu Feb 07 '17 at 15:58
Oh nono, just insert the portion I added that reads if (typeof str === 'undefined' || str === null) { – Michael Rodriguez Feb 07 '17 at 16:03
You would use nl2br(textcontent, false) – Michael Rodriguez Feb 07 '17 at 16:06

score 0 · Answer 4 · edited May 23 '17 at 12:33

0

You want to use


 as \r and

 as \n

Plug those values into your replace function and it should work.

More info:

edited May 23 '17 at 12:33

Community

1
1

answered Feb 07 '17 at 15:44

Simon Visser

364
3
14

Like `content.replace(/\r?\n/g, ' ');` – kittu Feb 07 '17 at 15:44
and it prints in the output – kittu Feb 07 '17 at 15:45
Updated the question. Actually I am fetching the text from DB but it renders with `
` tags inside the text when I display it on view(html page). I just checked the DB, it contain text like `asdasd
asd
asd

asd` – kittu Feb 07 '17 at 16:18

Preserving new lines and spaces in text area not working

4 Answers4