Br not working inside P when using Jquery.html() - javascript

I am trying to assign to <p> element a large amount of text, which includes some <br /> tags inside, as it's html. I am using the .html() method from JQuery, but it wont show the line breaks.
My code:
var text = "Hello, this is a pretty <br/> large text with some <br/> line breaks inside"
$('.container').append("<p class='myPClass'><p>");
$('.myPClass').html(text);
it does add the text as 'myPClass' html, but it totally ignores the <br/> tags.
the result i am getting is:
<p class='myPClass'>Hello, this is a pretty large text with some line breaks inside</p>
so it would look like:
"Hello, this is a pretty large text with some line breaks inside"
what i want my result to be:
<p class='myPClass'>Hello, this is a pretty <br/> large text with some <br/> line breaks inside</p>
so it would look like:
"Hello, this is a pretty
large text with some
line breaks inside"
what is wrong with my code? or how can i get to do this?

You can also try the following:
var text = "Hello, this is a pretty" + "<br/>" + "large text with some" + "<br/>" + "line breaks inside"
$('.container').append("<p class='myPClass'><p>");
$('.myPClass').html(text);

Try this
var text = "Hello, this is a pretty <br/> large text with some <br/> line breaks inside"
$('.container').append("<p class='myPClass'></p>");
$('.myPClass').html(text);

Related

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>

what's the different between <br> and \n as line break

I just finished a very simple assignment from my class. The part of the wrong code of script I wrote is like this:
alert("The circumference of a circle with this radius is " + circum +
"<br>" + "The area of a circle with this radius is " + area + "\n" +
"The surface area of a sphere with this radius is " + surarea + "\n" +
"The volume of a sphere with this radius is " + volume + "\n");
I have tried both <br> and \n in this part of code, and I am pretty sure that other parts are all right since I have tested them.
I was just wondering why the <br> doesn't work for me on my program. The example that the teacher gave us seems working fine. But he also told us that <br> should be used in HTML while \n is used in JS.
Thank you very much.
\n is a linebreak character. It is interpreted like that by the JS compiler. The HTML parsers on the other hand treat it as a normal string.
<br> in html is a tag to introduce a line break. In JS strings, this is treated as a normal string.
\n is a new line feed within the context of plain text
while <br>
is line break within the context of HTML
The <br> or <br /> tag is an HTML element that will display everything after this <br> or <br /> by starting from new line when rendered in browser while the \n is used to jump to next line in the source code or the output prompt in standard output.
<br> and <br /> are HTML and XHTML tags, while \n is a newline in code.

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...

How do I assign a HTML string over multiple lines in Javascript?

I have to assign an HTML string through the following Javascript code. However, this seems to be possible only if I put all the HTML on one line.
This works:
var assignedhtml = "<div> <p>It's the most beautiful thing I've seen in my life </p> <p> It's watermalone </p> </div>"
This does not work:
var assignedhtml = "<div>
<p>It's the most beautiful thing I've seen in my life </p>
<p> It's watermalone </p>
</div>"
The issue is that I have too many lines my html code. In the past, I have individually removed all the \n (newline) characters. Is there a simpler way to achieve the variable assignment I intend without having to individually go through the lines and delete the newline characters?
i.e., I want to keep the html code on the right as is in the second case above, but remove the newlines before assigning it to the variable.
There's no equivalent to, for instance, PHP's heredoc but you can add backslashes to escape the hard returns:
var assignedhtml = "<div>\
<p>It's the most beautiful thing I've seen in my life </p>\
<p> It's watermalone </p>\
</div>";
Here's a working example: http://jsfiddle.net/9W6BS/
One more variant - use '\' symbol at the and of line
Valid code example
var assignedhtml = "<div>\
<p>It's the most beautiful thing I've seen in my life </p>\
<p> It's watermalone </p>\
</div>"
Also want to note, that some tools ( like webStorm or PhpStorm) allow to edit such injections in normal mode ( Alt + enter - edit HTML Fragment )
You can do it like this:
var assignedhtml = '<div>' +
'<p>It\'s the most beautiful thing I've seen in my life</p>' +
'<p>It\'s watermelon</p>' +
'</div>';

new lines in a text within a DIV

I'm a little confused due to when I insert a text stored in mysql in a div I use the following sentence to insert the text:
<div class="menssge_holder"><?php echo str_replace("\n", "</p>", $conversation[$i]['message']); ?></div>
That sentence works fine, but when the user enter a new message in a textarea and press send button, i put that text within the div_holder and '\n' do not take effect.
What's the equivalent I should use in javascript or jQuery?
Thanks.
This will generate incorrect html. You will have a bunch of </p> with no <p> if you want to replace \n with a new line, try <br /> instead of </p>. As suggested above my #MarcB you may also want to try replacing \r\n.
Replace </p> with <p> or <br /> and it would work. Also, if you are using p, giving CSS to p this way will be helpful:
p {margin: 0 0 15px;}
<div class="menssge_holder"><?php echo str_replace(/\n/ig, "<br />", $conversation[$i]['message']); ?></div>
In your case you need something like this:
jsBin demo
$('#post').click(function(){
var copyThis = $('#textarea').val().replace(/\n/ig, '<br />');
$('#result').html( copyThis );
});

Categories