angular split().join() not working for new line

Question

    let samplestring ="a:b;c:d;e:f"
    this.detail = samplestring.split(";").join("\n");

<div fxLayout="row">
    <span class="default_label_font">{{detail}}</span>
  </div>

but not adding new line and giving response like response sample i'm getting

I've tried using "
" too but instead of adding break it concatenate it

I refer Split string with commas to new line

How are you displaying this string? How do you set it string as text? What element you use to set? — Rajesh, Mar 19 '20 at 09:10
You can also use a regex like `"a:b;c:d;e:f".replace(/;/g, '\n')` but new lines will only appear in a console, not in an HTML page where you have to use `
` instead of `\n` — Stephane Janicaud, Mar 19 '20 at 09:14
let me try stephane .. but why this is not working it should right? — Himanshi, Mar 19 '20 at 09:15
@Himanshi see my answer for more details, but no. `\n` is not rendered by HTML at all, unless rendered by `
` element. — Akxe, Mar 19 '20 at 09:17
As I said `\n` won't work in HTML page unless its supported either by the tag (like `
` or the CSS) — Stephane Janicaud, Mar 19 '20 at 09:17
Does this answer your question? [Render a string in HTML and preserve spaces and linebreaks](https://stackoverflow.com/questions/9492249/render-a-string-in-html-and-preserve-spaces-and-linebreaks) — Christian Vincenzo Traina, Mar 19 '20 at 09:28

score 1 · Answer 1 · answered Mar 19 '20 at 09:24

1

Another way to do it, I think much simpler, is to use [innerHtml] (docs) instead of interpolation and break lines with <br>.

Like this:

<div fxLayout="row">
  <span class="default_label_font" [innerHtml]="detail"></span>
</div>

let samplestring = "a:b;c:d;e:f";
this.detail = samplestring.split(";").join("<br>");

StackBlitz for you to test and play.

answered Mar 19 '20 at 09:24

vicpermir

3,544
3
22
34

still gives me this a:b
c:d
e:f – Himanshi Mar 19 '20 at 09:33
Did you update your HTML to use `[innerHtml]="detail"` instead of `{{ detail }}` like I showed you in my answer? – vicpermir Mar 19 '20 at 09:35
yes now i did previously used with {{}} it worked big thanks – Himanshi Mar 19 '20 at 09:39
short solution great reputation is low so cant vote but this worked – Himanshi Mar 19 '20 at 09:40

score 0 · Answer 2 · answered Mar 19 '20 at 09:16

If you need to print the text on separate lines you will have to add <br> inbetween. \n is not rendered by HTML, unless you use <pre>.

extract from component.ts

this.lines = samplestring.split(";");

extract from component.html

<ng-container *ngFor="let line of lines; i = index">
  <br *ngIf="i != 0">{{line}}
</ng-container>

score 0 · Answer 3 · answered Mar 19 '20 at 09:18

0

Issue is the element you are using to set. Span is a inline component. So line breaks will not work. You will have to use a block level element like Div

let samplestring = "a:b;c:d;e:f"
const detail = samplestring.split(";").join("\n");

document.querySelector('.default_label_font').innerText = detail;

<div fxLayout="row">
  <div class="default_label_font"></div>
</div>

answered Mar 19 '20 at 09:18

Rajesh

24,354
5
48
79

First of all, its not jQuery. Second, this is to depict the use of correct element. I can help you solve the issue not your code – Rajesh Mar 19 '20 at 09:34

score -1 · Answer 4 · edited Mar 19 '20 at 12:48

-1

HTML

<h1 id="ovde">
      ...
    </h1>

ts

let customItems = "1,2,3";
  customItems = customItems.split(',');

  for ( let i = 0; i < customItems.length; i++ )
    customItems[i] = "- " + customItems[i] + "\n";

  customItems = customItems.join('');

  document.getElementById("ovde").innerHTML = customItems;

edited Mar 19 '20 at 12:48

Bansi29

1,053
6
24

answered Mar 19 '20 at 09:14

Harsh Lad

9
3

angular way please – Himanshi Mar 19 '20 at 09:16
const elements = ['Fire', 'Air', 'Water']; console.log(elements.join()); // expected output: "Fire,Air,Water" console.log(elements.join('')); // expected output: "FireAirWater" console.log(elements.join('-')); – Harsh Lad Mar 19 '20 at 09:19

angular split().join() not working for new line

4 Answers4