We Keep Coding

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

How can I render html code in a div using Javascript or jQuery

I'm trying to render some HTML on the fly in my website without success. I've tried using jQuery's .html() function as below:
My html
<div id='open_ender_output'></div>
My JQuery
var openEnderContent = "<p><span style="color: #ff0000;">DDD</span>!!!!!<strong>666666666666</strong></p>"
//openEnderContent comes from my backend
$('#open_ender_output').html(openEnderContent)
The result is
<p><span style="color: #ff0000;">DDD</span>!!!!!<strong>666666666666</strong></p>
Is there a way to make the browser render that result on the fly so it reflects the specific styles set on the text?

Decode the content by creating a temporary element.
var openEnderContent = '<p><span style="color: #ff0000;">DDD</span>!!!!!<strong>666666666666</strong></p>';
$('#open_ender_output').html(
// create an element where the html content as the string
$('<div/>', {
html: openEnderContent
// get text content from element for decoded text
}).text()
)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='open_ender_output'></div>
Or you need to use a string which contains unescaped symbols.
var openEnderContent = '<p><span style="color: #ff0000;">DDD</span>!!!!!<strong>666666666666</strong></p>';
$('#open_ender_output').append(openEnderContent);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='open_ender_output'></div>

You're on the right track. You need to differentiate between single and double quotes when creating a string. You're closing your string by adding double quotes inside double quotes.
Use the var below.
var openEnderContent = "<span style='color: #ff0000;'>DDD</span>!!!!!<strong>666666666666</strong></p>";
$('#open_ender_output').html(openEnderContent);
Fiddle for example: https://jsfiddle.net/acr2xg6u/

Change your jQuery to
var openEnderContent = '<p><span style="color: #ff0000;">DDD</span>!!!!!<strong>666666666666</strong></p>';
$('#open_ender_output').append(openEnderContent);

Parsing problem from what I can tell.
"<p><span style="color: #ff0000;">DDD</span>!!!!!<strong>666666666666</strong></p>"
You cannot create strings like that. If you are inside one, you must use the other:
"My name is 'Josh Crowe'"
'My name is "Josh Crowe"'
Here's corrected code:
"<p><span style='color: #ff0000;'>DDD</span>!!!!!<strong>666666666666</strong></p>"

Creating functions containing HTML

I'm trying to create a Coffescript function that contains common HTML for a frequently re-used object in my page. I'm passing a variable to the function with the text I want changed each time. Every time I try to compile my Coffeescript, I get this error:
[stdin]:6:5: error: unexpected identifier
<p>"text1"</p>
^^^^^
Here's my code
text1 = "Some text"
ballon1 = (text1) ->
"Open Modal
<blockquote class=\"balloon\" id=\"balloon1\">
<p>"text1"</p>
X
</blockquote>"
I was hoping the output would be:
Open Modal
<blockquote class="balloon" id="balloon1\">
<p>Some text</p>
X
</blockquote>
Any thoughts? I was trying to find the language for the job; maybe I should be using PHP instead? Also, I'm using Javascript because I thought the code needed to be run client-side, since I want to pass different text to the function depending on what links are clicked and when.

Since this is CoffeeScript, you can use string interpolation:
ballon1 = (text1) ->
"Open Modal
<blockquote class=\"balloon\" id=\"balloon1\">
<p>#{text1}</p>
X
</blockquote>"
You could also switch to single quotes in your HTML to avoid all the backslashes:
ballon1 = (text1) ->
"<a href='#balloon1'>Open Modal</a>
<blockquote class='balloon' id='balloon1'>
<p>#{text1}</p>
<a href='#close' title='Close' class='close'>X</a>
</blockquote>"
Or, if you're like me a think single quotes look funny in HTML, you could use a block string for your HTML snippet:
ballon1 = (text1) ->
"""
Open Modal
<blockquote class="balloon" id="balloon1">
<p>#{text1}</p>
X
</blockquote>
"""
A block string even lets you nicely indent the HTML for readability. This is the version I'd probably go with.

If you want string concatenation, you want the + operator:
ballon1 = (text1) ->
"Open Modal
<blockquote class=\"balloon\" id=\"balloon1\">
<p>" + text1 + "</p>
X
</blockquote>"
Change is on the fourth line.
That said, you might consider looking into templating libraries if this is something that comes up a lot. That way (with many of them) you can author your templates in an HTML editor, embedding them in your page, and not have to fuss about with quote character escaping.

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>';

Replace all html attribute definitions that use single quotes with double quotes

I have an html string and I want to replace any instance of an html attribute being set with single quotes with double quotes.
So for example, I want to replace
<script src='foo.js'></script>
with
<script src="foo.js"></script>
However, I want to do this without affecting any single quotes that might be in javascript statements or in text within the html.
Eg
<script> var foo = '67'; </script>
should be unaffected and
<div id='foo'> 'hi' </div>
should become
<div id="foo"> 'hi' </div>
Is there any easy way to do this?
For a given element selecting it with jquery and then reading its outerHTML does this but I want to do it to an entire page of html all at once.
Thanks!

Try this:
var str = "<br style = 'width:100px'/> test link";
var regex = /<\w+\s*(\w+\s*=\s*(['][^']*['])|(["][^"]*["]))*\s*[\/]?>/g;
var rstr = str.replace(regex, function($0,$1,$2){
return $0.replace($2, $2.replace(/'/g, '"'));
});
console.log('replaced string = ' + rstr);
You can refector it to strictly match your case.

Answering my own question as I think the easiest solution to this is what is shown in this fiddle and does not require jquery or regexps:
http://jsfiddle.net/QdUR5/1/
<html id="foo"></html>​
var htmlString =
'<head>' +
'<script type="text/javascript" src=\'main.js\'></scr' + 'ipt>' +
'</head>' +
'<body onload=\'onLoad()\'>' +
'</body>' ;
document.getElementById('foo').innerHTML = htmlString;
console.log(document.getElementById('foo').outerHTML);
​
Basically you just need to set the inner html of an html element to the html string without the html tags and then output the html elements outer html.
I think that is a bit simpler than using a regexp although that is an awesome regexp Mike :)