Develop Reference

HTML/Javascript - How to display text from input field as HTML code?

I have a textarea on my webpage that users will enter HTML code in. I want to display that HTML code somewhere else on my webpage. How do I got about this?
Essentially I want to do what stack overflow does in their question asking text area where you can enter in HTML tags like strong and they will display appropriately like this when the text is displayed. Another example is that the user might enter an image tag and I would want that image to display in another part of the site.
I am using Node and Express on the backend with MongoDB to store the user input and ejs templates to display the HTML.

$("#htmlinput").on("input",function(){
$("#target").html($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="htmlinput"></textarea>
<div id="target"></div>

on js
function write() {
var text = document.form.input.value;
return document.getElementById('id').innerHTML = text;
}
on html
<form name="form">
<textarea onkeyup="write()" name="input"></textarea>
<div id="id"></div>
</form>

Below is my code. In my JS, I get the value from the textarea and displayed it to the div element with an id of output by using .innerHTML property. This property sets or returns the HTML content (inner HTML) of an element.
function myInput(){
var y = document.getElementById('textarea').value;
document.getElementById('output').innerHTML = y;
}
*{ box-sizing: border-box; }
textarea{ width: 100%; }
#output{
display:block;
background:#489ae0;
color: #fff;
margin: 0;
padding: 10px 20px;
box-sizing: border-box;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="textarea" placeholder="please input your texts here" oninput="myInput()"/></textarea>
<div id="output"></div>

Button highlighting not working inside textarea [duplicate]

I need to be able to render some HTML tags inside a textarea (namely <strong>, <i>, <u>, <a>) but textareas only interpret their content as text. Is there an easy way of doing it without relying on external libraries/plugins (I'm using jQuery)?
If not, do you know of any jQuery plugin I could use to do this?

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>

With an editable div you can use the method document.execCommand (more details) to easily provide the support for the tags you specified and for some other functionality...
#text {
width: 500px;
min-height: 100px;
border: 2px solid;
}
<div id="text" contenteditable="true"></div>
<button onclick="document.execCommand('bold');">toggle bold</button>
<button onclick="document.execCommand('italic');">toggle italic</button>
<button onclick="document.execCommand('underline');">toggle underline</button>

Since you only said render, yes you can. You could do something along the lines of this:
function render(){
var inp = document.getElementById("box");
var data = `
<svg xmlns="http://www.w3.org/2000/svg" width="${inp.offsetWidth}" height="${inp.offsetHeight}">
<foreignObject width="100%" height="100%">
<div xmlns="http://www.w3.org/1999/xhtml"
style="font-family:monospace;font-style: normal; font-variant: normal; font-size:13.3px;padding:2px;;">
${inp.value} <i style="color:red">cant touch this</i>
</div>
</foreignObject>
</svg>`;
var blob = new Blob( [data], {type:'image/svg+xml'} );
var url=URL.createObjectURL(blob);
inp.style.backgroundImage="url("+URL.createObjectURL(blob)+")";
}
onload=function(){
render();
ro = new ResizeObserver(render);
ro.observe(document.getElementById("box"));
}
#box{
color:transparent;
caret-color: black;
font-style: normal;/*must be same as in the svg for caret to align*/
font-variant: normal;
font-size:13.3px;
padding:2px;
font-family:monospace;
}
<textarea id="box" oninput="render()">you can edit me!</textarea>
This makes it so that a textarea will render html!
Besides the flashing when resizing, inability to directly use classes and having to make sure that the div in the svg has the same format as the textarea for the caret to align correctly, it's works!

Try this example:
function toggleRed() {
var text = $('.editable').text();
$('.editable').html('<p style="color:red">' + text + '</p>');
}
function toggleItalic() {
var text = $('.editable').text();
$('.editable').html("<i>" + text + "</i>");
}
$('.bold').click(function() {
toggleRed();
});
$('.italic').click(function() {
toggleItalic();
});
.editable {
width: 300px;
height: 200px;
border: 1px solid #ccc;
padding: 5px;
resize: both;
overflow: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="editable" contenteditable="true"></div>
<button class="bold">toggle red</button>
<button class="italic">toggle italic</button>

An addendum to this: You can use character entities (such as changing <div> to <div>) and it will render in the textarea.
But when it is saved, the value of the textarea is the text as rendered. So you don't need to de-encode. I just tested this across browsers (Internet Explorer back to version 11).

I have the same problem but in reverse, and the following solution. I want to put html from a div in a textarea (so I can edit some reactions on my website; I want to have the textarea in the same location.)
To put the content of this div in a textarea I use:
var content = $('#msg500').text();
$('#msg500').wrapInner('<textarea>' + content + '</textarea>');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="msg500">here some <strong>html</strong> <i>tags</i>.</div>

This is possible with <textarea>.
You only need to use the Summernote WYSIWYG editor.
It interprets HTML tags inside a textarea (namely <strong>, <i>, <u>, and <a>).

Add text to textarea using class name

When the user clicks a tag, I want to add append text to textarea using class name.
Click event handler works,but not adding text to the textarea.
Here's the code I have so far.
var boardName;
$(document).ready(function() {
$('.js-open-card-composer').click(function() {
boardName = document.title.replace(' | Trello', '');
$('.list-card-composer-textarea').text += boardName;
});
});
And, Here's the text area
<textarea class="list-card-composer-textarea js-card-title" style="overflow: hidden; word-wrap: break-word; height: 36px;"></textarea>
Thanks!

jQuery text() is function so instead of
$('.list-card-composer-textarea').text += boardName;
use
var data = $('.list-card-composer-textarea').text();
$('.list-card-composer-textarea').text( data + boardName);

Use html instead of text
var boardName;
$('.js-open-card-composer').click(function() {
boardName = 'test';
var data = $('.list-card-composer-textarea').html();
$('.list-card-composer-textarea').html(data+boardName);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea class="list-card-composer-textarea js-card-title" style="overflow: hidden; word-wrap: break-word; height: 36px;"></textarea>
<div class="js-open-card-composer" style="width:20px;height:20px;border:1px solid red"></div>

Why does my script not make new lines using keyup?

I'm coding a script for my forum which generates a preview of the given string.
Here is my js code
function MakePreview() {
var getText = document.getElementById('inputText').value;
document.getElementById('outputText').innerHTML = getText;}
Here is my HTML code
<article>
<h2>What are you doing?</h2>
<textarea id="inputText" onkeyup="MakePreview()"></textarea>
<br/>
<input type="submit" class="button" value="Hello"/>
</article>
<article>
<p id="outputText"></p>
</article>
Furthermore I have an textarea for the input and an paragraph for the output. But the output does not make a new line like textareas does.
Usually a paragraph makes automatically new lines when the string is longer than the width of the given content.
Does someone have a solution?
Thanks in advance

I'm not sure, if it's possible to achieve exactly what you want (due to the different font size and family), but this snippet is very close to it.
function makePreview() {
var text = document.getElementById('inputText').value;
document.getElementById('outputText').innerHTML = text;
}
.wrapper {
width: 150px;
}
.wrapper textarea {
width: 100%;
}
#outputText {
position: relative;
white-space: pre-wrap;
word-break: break-all;
border: 1px solid #ccc;
}
<div class="wrapper">
<textarea id="inputText" oninput="makePreview()"></textarea>
<p id="outputText"></p>
</div>
The idea is to wrap both the textarea and the p within a same parent to get their widths to match. word-break: break-all and white-space: pre-wrap "copies" the automatic text wrapping and entered new-lines within textarea to the p element.
However, the text might be cutted in a different place, depending on the used font family and size. You could get a better match if you'd use the same font in both elements.

You can instruct paragraph to respect new lines characters (and other whitespaces like tabs, spaces, etc.) by setting its white-space property to pre:
function MakePreview() {
var getText = document.getElementById('inputText').value;
document.getElementById('outputText').innerHTML = getText;
}
#outputText {
white-space: pre;
}
<textarea id="inputText" onkeyup="MakePreview()" rows="4" cols="20"></textarea>
<p id="outputText"></p>

In html multiple whitespaces are replaced by single space so if you want to preview in paragraph you need to replace newlines with <br/>
function MakePreview() {
var getText = document.getElementById('inputText').value;
document.getElementById('outputParagraph').innerHTML = getText.replace('\n', '<br/>');
}

Use wrap="hard" on your textArea. It will help for new line if the length is more the textArea size.
For fixed row and column you can use rows="2" cols="20" in textarea.

If textbox contain a specific string do some function - javascript

I am wondering how to search specific string in big textbox (which contains 200 words) so I can make function to color them. Ex. In textbox there is a sentence "my dog is happy" and i want string "dog" to become red by button or sth else. Is it possible???

Yes, it is possible. But don't use a text box or text area, use a div with contenteditable = "true":
<div id="editableDiv" class="editable" contenteditable="true">
This is a sentence containing 'dog'.<br />
You can edit the contents of this div.
</div>
<button id="highlightBtn">Highlight "dog"</button>
<script type="text/javascript">
highlightBtn.onclick = function() {
var elem = document.getElementById('editableDiv');
elem.innerHTML = elem.innerHTML.replace(/dog/g,
'<span class="redText">dog</span>');
}
</script>
And don't forget to create the classes redText and editable in your stylesheet:
.editable {
padding: 5px;
border: dashed 1px black;
}
.redText {
color: red;
}
JSFiddle: http://jsfiddle.net/ProgramFOX/UMMPh/