How to Embed HTML Formatting Inside of a <Textarea> Tag

Can I embed HTML formatting inside of a textarea tag?

I am pretty sure the answer is no -- cannot do it with a textarea.

From the MDN docs:

The HTML <textarea> element represents a multi-line plain-text editing control.

Permitted content Text

Rendering HTML inside textarea

This is not possible to do with a textarea. You are looking for a content editable div, which is very easily done:

<div contenteditable="true"></div>

jsFiddle

div.editable {
    width: 300px;
    height: 200px;
    border: 1px solid #ccc;
    padding: 5px;
}

strong {
  font-weight: bold;
}

<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 end?
<br>It works nicely.
<br>
<br><span style="color: lightgreen">Great</span>.
</div>

Displaying text in textarea with formatting in place (e.g. br)

this is not possible to do this with textarea. you can use content editable div

var theString = `Hello.<br>Hi.<br>Hey, <strong>user</strong> <span style="color: red">Logout</span>.`

// in pure js
document.getElementById('textareaContent').innerHTML = theString;

// OR in jQuery
$('#textareaContent').html(theString)

div {
    width: 250px;
    height: 150px;
    border: 1px solid #ababab;
    padding: 8px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div id="textareaContent" contenteditable="true"></div>

How to display formatted html in text area in angularjs?

textarea only supports plain text. Since you are not allowing the text to be edited, I'd use the div that you started with. I suspect that you're trying to control the size and enable scroll bars when necessary on the div, and hoping to get that out of textarea. You'll be much better off just styling the div accordingly.

How can I format text in an HTML textarea?

You don't want line breaks. Trust me.

Just set this:

white-space: pre-wrap;

This CSS will make whitespace significant, preserving it as it was typed.

I want the text that is input in TextArea in same format

You can use the pre tag for displaying the content as entered.

I have created following example using vanilla JS. You can implement the same in react.

<textarea id="tarea" rows="2" style="width: 100%" onclick="handleValue()"></textarea><p id="display"></p><script>  function handleValue() {    var tarea = document.getElementById('tarea');    var disp = document.getElementById('display');    disp.innerHTML = '<pre>' + tarea.value + '</pre>';  }</script>