Insert paragraphs from a JSON file into a DIV

Asked

Viewed 2,543 times

8

I have a file that in its contents it contains paragraphs. These paragraphs are separated by \n but when I insert the content the paragraphs are not separated and instead of line break I have a space in the DIV. In my view my solution would be to convert the \n in line breaks that the HTML understands (<p> or <br>). What is the most correct method to use?

javascript html5 json
  • 4

    Questions about what is most correct are always more complicated. They lead to subjective answers. I’m not saying that the question in its general form cannot be answered. I am seeing many questions just about what is right and it is not always easy to say that. Giving a correct solution is easier. If you do not know which is the most correct, how will you choose the answer to be accepted?

  • there are numerous ways to treat my need above, what I’m looking for is which form is most used, with the intention of making use of some general standard or more current and viable methods @bigown.

  • Your question is being discussed here: http://meta.answall.com/questions/76/o-doir-quando-os-votos-seem_incoerentes-com-conteudo-. It would be interesting if you could try to improve it to avoid misinterpretations.

  • function nl2br do php, written in javascript: http://phpjs.org/functions/nl2br/

4 answers

10


What is the most correct method to use?

More correct in what sense? Performance? Assertiveness? Readability?

Finally, one usually uses a traditional replace of Javascript (as seen here, here and here...).

Then in your case it would be enough:

>>> "string\ncom\nquebras\nde\nlinha".replace(/\n/g, '<br />');
"string<br />com<br />quebras<br />de<br />linha"

Now, to replace line breaks*, and not just \n better use:

>>> "Quebra de linha *nix.\nQuebra de linha Mac.\rQuebra de linha Windows.\r\n".replace(/\r\n|[\r\n]/g, '<br />');
"Quebra de linha *nix.<br />Quebra de linha Mac.<br />Quebra de linha Windows.<br />"

* There are two other line breaking types besides *Nix style (\n): \r (old Mac style) and \r\n (windows style).

  • 1

    used str.replace(/\n/g,'<br>')

  • 1

    @Leandroluk If you are guaranteed that your line breaks are \n is really the best (:

  • what would be the best line break to use? (best which one is the most used \n or \r)

  • 1

    If it is you who is mounting the string I suggest \n; since \r is very rare, unless mistaken my only ancient Macintosh use; and \r\n despite being common in Windows environments is unnecessary, a character enough and is simpler, I’ve tired of seeing people confusing with \n\r (that doesn’t exist).

3

To replace by <br/>, do:

result = result.replace(/\n/g, "<br/>");

To replace by <p>...</p>:

result = "<p>" + result.replace(/\n/g, "</p><p>") + "</p>";

The best approach depends on what you want, but I’d go by the tag <p> because you could format with CSS and manipulate more easily with javascript.

  • In your answer you will only replace 1 occurrence.

  • 4

    @War, you didn’t see the /g there?

  • 1

    \n is only shown at the end of the @Gerra. paragraph if used as you reported the tag <p></p> he would leave a blank paragraph lost in the code, and perhaps shape the page with a space left.

  • @downvoters: please comment why of voting down.

  • 1

    @Leandroluk he’s replacing \n for </p><p> note that it is the opposite of what you have commented. And including <p> at the beginning and </p> at the end will correctly separate into paragraphs.

  • Example in jsFiddle http://jsfiddle.net/RLz6Z/

Show 1 more comment

0

Using the methods split and join also comes to the result:

>>> "Primeiro parágrafo.\nSegundo parágrafo.".split('\n').join('<br/>');
"Primeiro parágrafo.<br/>Segundo parágrafo."


let res = "Primeiro parágrafo.\nSegundo parágrafo.".split('\n').join('<br/>');
document.querySelector('#resultado').innerHTML = res;
<div id="resultado"></div>

-5

Using regular Expression is possible this way:

str = str.replaceAll("(\r\n|\n)", "<br />");

Browser other questions tagged javascript html5 json

You are not signed in. Login or sign up in order to post.