CODEWITHSUNDEEP
angulartypescript
asimplecore
asimplecore

Reputation: 378

Typescript - Creating New Lines in a string using "\n"

I've got a string which contains a body of markdown content to be rendered by the ngx-markdown service on Angular 6. The string is stored in a Google Firestore database. So I'm intending to use the "\n" characters to break down the content into individual lines before it is processed by the ngx markdown service.

First ordered list item\n2. Another item\n * Unordered sub-list.\n1. Actual numbers don't matter, just that it's a number\n 1. Ordered sub-list\n4. And another item.\n\n You can have properly indented paragraphs within list items. Notice the blank line above, and the leading spaces (at least one, but we'll use three here to also align the raw Markdown).\n\n To have a line break without a paragraph, you will need to use two trailing spaces. \n Note that this line is separate, but within the same paragraph. \n (This is contrary to the typical GFM line break behaviour, where trailing spaces are not required.)\n\n\n* Unordered list can use asterisks\n- Or minuses\n+ Or pluses

How can I manually replace the "\n" characters in the string with new lines? I have previously used Environment.NewLine() in C# and VB.NET to do the job - does TypeScript have an equivalent method?

Upvotes: 19

Views: 73090

Answers (3)

Ali Nejad
Ali Nejad

Reputation: 401

I think a better solution to this issue is to put a simple CSS attribute in like:

.content { white-space: pre-line; }

Upvotes: 40

user4676340
user4676340

Reputation:

\n are treated as new lines when you input them into innerText properties.

Look : 

const div = [...document.querySelectorAll('div')];

div[0].innerHTML = 'New\nLine';
div[1].innerText = 'New\nLine';

const txt = document.createTextNode("New\nLine");
div[2].appendChild(txt);
div {
  border: 1px solid #ddd;
  margin: 12px 0;
  padding: 12px;
}
<div></div>
<div></div>
<div></div>

Next thing, you could separate the strings into an array, and display block elements :

const str = `First ordered list item\n2. Another item\n * Unordered sub-list.\n1. Actual numbers don't matter, just that it's a number\n 1. Ordered sub-list\n4. And another item.\n\n You can have properly indented paragraphs within list items. Notice the blank line above, and the leading spaces (at least one, but we'll use three here to also align the raw Markdown).\n\n To have a line break without a paragraph, you will need to use two trailing spaces. \n Note that this line is separate, but within the same paragraph. \n (This is contrary to the typical GFM line break behaviour, where trailing spaces are not required.)\n\n\n* Unordered list can use asterisks\n- Or minuses\n+ Or pluses`;

const arr = str.split('\n');

arr.forEach(item => {
  const div = document.createElement('div');
  div.innerText = item;
  document.body.appendChild(div);
});

Upvotes: 5

Vinod Bhavnani
Vinod Bhavnani

Reputation: 2225

You need to convert the string by replacing all the \n with <br> tags. And then you need to bind it as HTML instead of string.

Example:

str: String = "First ordered list item\n2. Another item\n * Unordered sub-list.\n"

//Replace \n with <br>
this.str.replace("\n", "<br>");

Now in your template instead of doing this:

<div>{{str}}</div

You need to do this

<div [innerHTML]="str"></div>

By binding it to innerHTML, you are treating your string as html. Hence the br tags will be processed.

Hope this helps.

Upvotes: 34

Related Questions