打字稿-使用"\ n"在字符串中创建新行. [英] Typescript - Creating New Lines in a string using "\n"

问题描述

我有一个字符串，其中包含要由Angular 6上的ngx-markdown服务呈现的markdown内容主体.该字符串存储在Google Firestore数据库中.因此，我打算在ngx markdown服务处理内容之前，先使用"\ 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

如何用新行手动替换字符串中的"\ n"字符?我以前曾在C#和VB.NET中使用Environment.NewLine()来完成这项工作-TypeScript是否具有等效的方法?

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?

推荐答案

\n输入到innerText属性中时，它们将被视为新行.

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

看:

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);
});

这篇关于打字稿-使用"\ n"在字符串中创建新行.的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！