newline character does not work when parsing as JSON string object - javascript

I was having some trouble phrasing that title, but my problem is that the \n characters in strings in my JSON dictionary get nullified when I parse to html.
var exp = {
"globalRunInfo" : {
"file" : "file/path/goes/here",
"info" : "random junk here",
"copyright" : "this is where I am getting my problem \n the newline doesn't work \n so all this gets formatted as one line"
}
}
ko.applyBindings(exp);
<!DOCTYPE html>
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<div data-bind="with: globalRunInfo">
<p data-bind="text: file"></p>
<p>SOMETHING</p>
<p data-bind="text: info"></p>
<span data-bind="text: copyright"></span>
</div>
</html>
Does anyone know how to fix this? I'm trying to avoid writing a function that checks for newline characters and replaces them with breaks or something. It's a lot of work for something that I'm going to use once.

Try setting the CSS property white-space: pre-wrap on the span element. This will result in the braking of the new line character.
<span style="white-space: pre-wrap" data-bind="text: copyright"></span>

You can assign a class to the area and use white-space: pre-wrap
Taken from the white-space documentation:
pre-wrap
Sequences of whitespace are preserved. Lines are broken at newline characters, at <br>, and as necessary to fill line boxes.
In addition you can also remove the extra space after \n so you don't get the space added to the front of the new line.
var exp = {
"globalRunInfo" : {
"file" : "file/path/goes/here",
"info" : "random junk here",
"copyright" : "this is where I am getting my problem \nthe newline doesn't work \nso all this gets formatted as one line"
}
}
ko.applyBindings(exp);
.example{
white-space: pre-wrap;
}
<!DOCTYPE html>
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<div data-bind="with: globalRunInfo">
<p data-bind="text: file"></p>
<p>SOMETHING</p>
<p data-bind="text: info"></p>
<span class="example" data-bind="text: copyright"></span>
</div>
</html>

wrap the whole json text with pre tag. it worked with me

Related

How to display paragraphs coming from a single element in Angular with the required characters working

I have a object in view.component.ts file coming form backend. It is supposed to be description for a product. It has more than 500 lines of text. for eg:
{"description" : "Hello my Name is Param Bedi.\r\nHow are you\r\n\r...continue till 500 lines and more"}
I need to display this to Angular view. But its just coming straight as it is ie containing all the "\r\n" etc. Its not inserting a new line instead of \n.
This is what I am doing in view.component.html
<div>
<p>{{ data["description"] }}</p>
</div>
What should I do so that I can display the data with newline and other special characters working?
You can use HTMLElement.innerText:
<div>
<p [innerText]="data.description"></p>
</div>
Or, if you need special character output, using Element.innerHTML (with replacing new lines with <br>):
<div>
<p [innerHTML]="data.description.replace(/(\r\n|\r|\n)/g, '<br>')"></p>
</div>
Solution 1: You can use white-space: pre-line in css. You can check here CSS White Space.
Solution 2: You can use Textarea with readonly.
<textarea name="description" readonly [(ngModel)]="data.descrption" style="resize: none;" ></textarea>

New line with template literals in Angular [duplicate]

So I'm trying to do something very simple and I'm stuck. I have a String variable and within that variable I Wanna set line break so certain part of the text goes to new line.
What I have tried:
title: string = "My \n Title";
title: string = "My\ Title";
title: string = "My\
Title";
title: string = "My" + "\n" + "Title";
I have tried many variations but its just not working. Am I being stupid and missing something very obvious?
Not a duplicate as I have tried the <br/> and it has not worked.
Update:
The variable is being printed in the browser HTML like so {{title}}
Here are two demonstrably working versions...
White Space
Solution One... if you want newlines to be respected in HTML... (works with the back-tick strings, or with 'My \ntitle'...
document.getElementById('example').innerHTML = `My
title`;
h1 {
white-space: pre;
}
<h1 id="example">
</h1>
Angular Version:
<h1 style="white-space: pre;">{{title}}</h1>
HTML Break
Solution two... you want to use HTML...
document.getElementById('example').innerHTML = 'My<br />title';
<h1 id="example">
</h1>
Use ng-bind-html if you want to allow HTML during binding.
In html add style:
<div style="white-space: pre-line">{{DialogText}} </div>
Use '\n' to add newline in the typescript.
this.DialogText = "Hello" + '\n' + "World";
Same in stackblitz: https://stackblitz.com/edit/angular-rpoxr5linebreak
You can also use a readonly textarea element instead of <div or <p> to keep the format of original string.
try like this
<div ng-bind-html="myMsg"></div>
$scope.myMsg = `Below is the result: <br>Successful:1, <br>Failed:2` // Use backtick
You have done the right thing.
But if you are showing this in a browser, the \n means didley.
You have to do:
title: string = "My<br>Title"
Now if you are using a fancy front end tool like React, you will have to deal with unsafe HTML in strings...

javascript display multi-line text

I try to display a multi-lined text but it always apears as one line.
For example:
var text ="line 1. \n line 2. \n line 3."
It it supposed to be displayed like :
line 1.
line 2.
line 3.
but instead I end up with
line 1. line 2. line 3.
in a rendered html page.
I tryed jquery text and html methods but not working.
Even through angularjs, it is always the same.
$('#element').text(text);
$('#element').html(text);
or
<div>{{ text }}</div>
Isn't there a way to get what I'm expecting?
Try Something like
<div class="angular-with-newlines">
{{ text }}
</div>
css
/* in the css file or in a style block */
.angular-with-newlines {
white-space: pre-wrap;
}
This will use newlines and whitespace as given, but also break content at the content boundaries. More information about the white-space property can be found here:
https://developer.mozilla.org/en-US/docs/Web/CSS/white-space
If you want to break on newlines, but also collapse multiple spaces or white space preceeding the text (very similar to the original browser behaviour), you can use:
white-space: pre-line;
May be, this is what you want...
<textarea id="text"></textarea>
<p id="text2"></p>
<button onclick="multi_line_textarea()">on textarea</button>
<button onclick="multi_line_para()">on paragraph</button>
<script>
function multi_line_textarea(){
var text = "line 1. \nline 2. \nline 3.";
var el = document.getElementById('text');
el.innerHTML = text;
}
function multi_line_para(){
var text2 = "line 1. <br/>line 2. <br/>line 3.";
var el2 = document.getElementById('text2');
el2.innerHTML = text2;
}
</script>
Here's a jsFiddle:https://jsfiddle.net/p984fd1m/2/
Hope that helps..
Try like this.
<p style="white-space: pre-line;">{{ text }}</p>

How to get line break within string interpolation in Angularjs

So I'm trying to do something very simple and I'm stuck. I have a String variable and within that variable I Wanna set line break so certain part of the text goes to new line.
What I have tried:
title: string = "My \n Title";
title: string = "My\ Title";
title: string = "My\
Title";
title: string = "My" + "\n" + "Title";
I have tried many variations but its just not working. Am I being stupid and missing something very obvious?
Not a duplicate as I have tried the <br/> and it has not worked.
Update:
The variable is being printed in the browser HTML like so {{title}}
Here are two demonstrably working versions...
White Space
Solution One... if you want newlines to be respected in HTML... (works with the back-tick strings, or with 'My \ntitle'...
document.getElementById('example').innerHTML = `My
title`;
h1 {
white-space: pre;
}
<h1 id="example">
</h1>
Angular Version:
<h1 style="white-space: pre;">{{title}}</h1>
HTML Break
Solution two... you want to use HTML...
document.getElementById('example').innerHTML = 'My<br />title';
<h1 id="example">
</h1>
Use ng-bind-html if you want to allow HTML during binding.
In html add style:
<div style="white-space: pre-line">{{DialogText}} </div>
Use '\n' to add newline in the typescript.
this.DialogText = "Hello" + '\n' + "World";
Same in stackblitz: https://stackblitz.com/edit/angular-rpoxr5linebreak
You can also use a readonly textarea element instead of <div or <p> to keep the format of original string.
try like this
<div ng-bind-html="myMsg"></div>
$scope.myMsg = `Below is the result: <br>Successful:1, <br>Failed:2` // Use backtick
You have done the right thing.
But if you are showing this in a browser, the \n means didley.
You have to do:
title: string = "My<br>Title"
Now if you are using a fancy front end tool like React, you will have to deal with unsafe HTML in strings...

Regexp for content inside tags

I use Javascript
I have this:
<(div|span) class="search-result-(body-text|title)">(.*?)</(span|div)>
And i use is on this content:
<div class="search-result-item club">
<span class="search-result-type">Projekt</span
<span class="search-result-title">Titel</span>
<div class="search-result-body-text">
Body text
</div>
<div class="search-result-attributes">
<span class="search-result-attribute">Attribute</span>
</div>
</div>
My result is:
<span class="search-result-title">Titel</span>,
<div class="search-result-body-text">
Body text
</div>
Thats make sense, but how should my regexp look like so it strips the tags, so i only get: Titel, Body text
It is required by law that someone post a link to this: RegEx match open tags except XHTML self-contained tags which you should read and reconsider whether you really want to be parsing HTML using regular expressions.
However, what you want is the contents of the third () group in your match. The exec method of a JS regular expression object is an array containing the whole match at index 0, and the matches from all the groups at indices 1,2,... (in this case index 3 is what you need).
[NOTE: an earlier version of this answer had "first" and "1" instead of "third" and "3" above, because I misread your regexp. Sorry.]

Categories