How to Render HTML in TextArea

TextArea DOM element allows you to easily input multiline texts into your website or application. But this is plain text without any formatting. Sometimes web developers may need to render HTML inside a TextArea. For example, how to display syntax highlighting in textarea? In this article, how to render HTML in TextArea or at least create that effect.

Why Render HTML in TextArea

One of the most common applications of this use case is if you need to display some kind of code editor on your website or app. Often you may need to implement syntax highlighting and other formatting for your code displayed in a textarea. Sadly, TextArea text cannot be formatted. So if you use a textarea to display editable code, then it will be displayed as plain text without any formatting. That is the problem we will be solving in our article. The solution is to fake a textarea using an editable HTML element like div to render html.

How to Render HTML in TextArea

On most modern web browsers, it is not possible to render HTML in TextArea yet. You can only make it look like HTML is rendered inside TextArea. You can do this using editable div. Here is a sample HTML content editable div.

<div contenteditable="true" id='my_div'></div>

When you set contenteditable attribute of a div then it becomes editable. Please note, you can also use contenteditable attribute on other non-editable HTML elements that contain text, such as paragraph tag (p).

Next, we need to make the div look like a TextArea. You will need to do this using CSS. Here is a sample CSS to make this div look like a TextArea.

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

strong {
  font-weight: bold;
}

Here is a sample editable div with sample text. We have applied HTML formatting for text in div, which is not possible to do in a textarea.

<div contenteditable="true">Hello World.<br>
Good morning <strong>everyone</strong>
<br>
<br><span style="color: lightgreen">Great</span>.
</div>

If you want to read the HTML content in this div, you will need to fetch it using innerHTML property of this div. You can use the method used to get text of a TextArea. Also, please remember that when you place a TextArea inside a form, its contents are automatically submitted during form submission. But since we are using a div and not a form input, you will need to explicitly submit the div contents via AJAX or some other method. Otherwise, if you simply place this in a form, its contents will not be sent to server, by default.

Conclusion

In this article, we have learnt how to render HTML in TextArea. As mentioned earlier, we cannot use TextArea to make this happen. We will need to format a div as a TextArea and render HTML inside it. While doing so, you need to ensure that its contents are read as you would do in a div and not TextArea. Also, you need to explicitly send its data to server during form submission, since this will not happen automatically. If you are wondering how code editors do syntax highlighting then they use this trick of faking a textarea using editable div and then using it to format text content.

Also read:

How to Install PuTTy on Linux
JS Object Convert to String Without Quotes
How to Highlight Text Using JavaScript
How to Check File MIME Type with JS
How to Replace Line Breaks With BR in JavaScript