Javascript - break in textarea but not in paragraph

Question

I have a question:

I have a QR Code Scanner which gets a VCard. Im getting back the following String: BEGIN:VCARD VERSION:2.1 FN:John Doe N:doe;john END:VCARD

The problem is the following: When putting this Information (via Javascript) in a textarea or just dump it to an alert winow, the information has breaks in between, looking like this:

BEGIN:VCARD
VERSION:2.1
FN:John Doe
.
.
.

But when putting this information into a paragraph (), it has no breaks in it and it's just a plain string.

The question is now, can I put those breaks into the paragraph as well or can I insert another sign or anything else in between the attributes?

I thought about just splitting the string on blanks, but it's not working because e.g. FN itself contains blanks as wel...

Thanks for your help.

Edit: Unfortunatelly, all 3 advices don't work..

What I have now is the following:

 function writeqrcodecontent(){
            var textfeld = document.getElementById("inhaltvonqrcode");
            var wert = $.scriptcam.getBarCode();
            //wert.split('\n').join('<br/>');
            //wert.replace("\n", "<br>");
            //wert.replace(/\n/g,'<br>');
            textfeld.innerHTML = wert;
            textfeld.style.display="block";
        }

But as said, all three commented out lines do not work, everything is still displayed in one line.

The paragraph is defined with:

 <p id="inhaltvonqrcode" style="display:none; clear:both;"></p

I understand your ideas but I don't understand why it's not working...

By the way, what I also tried is something like wert.split('\n').join('#'); to see, if it's really the break or it's just not working, but this doesn't work as well, so the text just seems to have no \n in it..

EDIT 2

It's working now, I neeeded to do both steps in one step, so not

var wert = $.scriptcam.getBarCode();
wert.split('\n').join('<br/>');

but

var wert = ($.scriptcam.getBarCode()).split('\n').join('<br/>');

Thanks for your help!

The textarea is probably using `\n` for new lines. For HTML you need to make them `
`. — Spencer Wieczorek, Apr 08 '15 at 15:12
Just a note that this is [dependent on environment](http://stackoverflow.com/questions/14217101/what-character-represents-a-new-line-in-a-text-area). — Jason Cust, Apr 08 '15 at 15:18

score 2 · Answer 1 · answered Apr 08 '15 at 15:14

2

The string you get back likely contains newline characters \n. To get them to display with the newlines intact in HTML, you can either wrap everything returned with <pre></pre> in your HTML. Or split on newline \n and replace it with  .

text.split('\n').join('<br />')

answered Apr 08 '15 at 15:14

Nicholas Thomson

558
3
8

Just a note that this is [dependent on environment](http://stackoverflow.com/questions/14217101/what-character-represents-a-new-line-in-a-text-area). – Jason Cust Apr 08 '15 at 15:18
Fortunately that slight difference shouldn't have any effect in this case. (`\r\n` vs `\n`) – Kevin B Apr 08 '15 at 15:24

score 1 · Answer 2 · answered Apr 08 '15 at 15:49

1

text.replace(/\n/g,' ');

this line will replace all lines with  

answered Apr 08 '15 at 15:49

Omar Elawady

3,300
1
13
17

score 0 · Answer 3 · answered Apr 08 '15 at 15:21

0

Your barcode reader is reading the vCard with \n newline, however the pure html this newline is ignored.

in Javascript you can just use something like

someText.replace("\n", "<br>");

and it will do what you want. In php its the nl2br function

answered Apr 08 '15 at 15:21

Martin Gottweis

2,721
13
27

Javascript - break in textarea but not in paragraph

3 Answers3