Develop Reference

Create a line break in the text inside span

I am using the following HTML in the application:-
<span style="display:inline-block;white-space: pre-line">I would like to discuss this: {"incidentId":"TG00040","desc":"Patient Details","reportdetails":"Patient Name:Bhawana \n Grade:10th \n Teacher:Meeta"}</span>
But am not able to create line breaks in the text. I have also tried using \n,\r and br tag but nothing seems to break. The expected output is:-
I would like to discuss this: {"incidentId":"TG00040","desc":"Patient Details","reportdetails":"Patient Name:Bhawana Grade:10th Teacher:Meeta"}

If data displayed in span contain the character \n and you can't modify it before display it in dom
you can use a simple js function to replace all \n occurence by <br/>
var span = document.getElementById('my-data');
span.innerHTML = span.innerHTML.replaceAll('\\n', '<br/>');
<span id="my-data">I would like to discuss this: {"incidentId":"TG00040","desc":"Patient Details","reportdetails":"Patient Name:Bhawana \n Grade:10th \n Teacher:Meeta"}</span>
just be careful to mastered dom modification when you replace innerHTML. here there is no risk but if you have based replace on user input you can have xss issue

use <br> instead of \n. Do you want output like this with a line break?
<span style="display:inline-block;white-space: pre-line">I would like to discuss this: {"incidentId":"TG00040","desc":"Patient Details","reportdetails":"Patient Name:Bhawana <br> Grade:10th <br> Teacher:Meeta"}</span>

how to display html string(html tags) as content in a textarea?

I want to display the html tags in a div tag so i used like,
<p [innerHTML]="data"> // data is a html tags for ex: h1 tag
</p>
it is working fine but if i want to print in the text area,
it is not translating the html code and directly printing the html code
like,
<textarea rows="4" cols="50">
{{data}}
</textarea>
Here is the working code on stackblitz,

This is not possible, what you are looking for is a content editable div. Look at this fiddle, but basically you need to (just translate this to Angular):
<div contenteditable="true">This is the first line.<br>
See, how the text fits here, also if<br>there is a <strong>linebreak</strong> at the e nd?
<br>It works nicely.
<br>
<br><span style="color: lightgreen">Great</span>.
</div>

This question already has answer in stackblitz,
Rendering HTML inside textarea
What you are doing is, set the div tag editable

<textarea> is input element, you cannot bind HTML tags like <b> or <i> in it.
To bind the data remove this HTML tags from typescript and bind it in <textarea> using [(ngModel)]
Try like this:
<textarea rows="4" cols="50" [(ngModel)]="data">
</textarea>

Removing whitespace in textarea ignored by jQuery.trim()

I have a <textarea> which contains a text called by php. The text contains an ID of the user, so it's for every user different. However, the html looks always like this:
<div>
<textarea id="text" readonly="readonly">" example text "</textarea>
</div>
How do I remove these whitespaces. I have tried multiple trim suggestions or Regex approaches on SO, but none of them are working. The textarea cannot be changed into a div or p.
Update:
Regex is somehow ignored, but the below answer gave the outcome:
$("#text").val((i, v) => '${v.slice(1, -1).trim()}');

Use regex pattern /\s{2,}/g in .replace() that match multiple spaces and remove them from string.
$("#text").val((i, v) => v.replace(/\s{2,}/g, ''));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<textarea id="text" readonly="readonly">" example text "</textarea>
</div>
Also you can remove " from start and end of string using String.slice() and then remove space using .trim(). At the end wrap string with ""
$("#text").val((i, v) => `"${v.slice(1, -1).trim()}"`);

You can use a regex to remove quotes and spaces
$("#text").val($("#text").val().replace(/^"\s+(.*?)\s+"$/,"$1"));
console.log(">"+$("#text").val()+"<")
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<textarea id="text" readonly="readonly">" example text "</textarea>
</div>

Include space from input

My user wants an input field where he can enter a message, which I will then have displayed as a scrolling marquee across the page. He wants to be able to include empty spaces, for example,
"Employees please look up."
My textarea, when I get the text, doesn't notice the space. Any way to get that?
I know this is an odd request - google only tells me how to remove whitespace, not include it.
var text = $('textarea').val();
<textarea class='messageInput'></textarea>

I am pretty sure that you are getting the value with all the white-spaces right, the problem is in the displaying of the value in your (probably) custom div. The best way would be to set white-space: pre on that element which (as the option suggests) will preserve white-space. ;) Example:
<div id="foo" style="white-space: pre"><!-- insert text here --></div>
And ignore all the &nbps; suggestions which are essentially modifying the text content. CSS is the right way to do this!

You need to convert space characters into non-breaking spaces, which can be done using String.prototype.replace() with a regular expression:
$('#text').html($('textarea').val().replace(/ /g, '&nbsp'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea class='messageInput'>employees hello</textarea>
<p id="text"></p>
You need / /g so that it will match all spaces, not just the first one, which .replace(' '...) would do.
Note that smajl's suggestion is less invasive and probably better, but I'll leave this for posterity.

The spaces in the value are not ignored. It's that the browser by default "compresses" duplicate spaces. Use white-space:pre;
<input type="text" id="input">
<button id="button">
TEST
</button>
<div id="result"></div>
document.getElementById("button").onclick = function() {
var content = document.getElementById("input").value;
console.log(content);
document.getElementById("result").innerHTML = content;
}
#result {
white-space:pre;
}
<input type="text" id="input">
<button id="button">
TEST
</button>
<div id="result"></div>
EDIT: too late ;)

Avoiding whitespace between tags in Jade template output when pretty printing

I have to print out an input tag and a label without any space between the end of one tag and the start of the next... but I also want to pretty-print the rest of the document.
By default — with pretty printing turned on in Jade — I get the following:
<input ...></input>
<label ...></label>
I want:
<input ...><label ...></label>
or
<input ...></input><label ...></label>
The idea from Jade - Controlling line-breaks in the HTML output doesn't work because input is a self-closing tag.
Update 1: I have created the obvious solution using a mixin and literal HTML, but I would like to avoid that if possible.

In Razor, I addressed this by wrapping the whitespace with a multi-line comment:
<div>
<span>No trailing</span><!--
--><span>space</span>
</div>