0

I am trying to remove all HTML tags from a textarea-tag (TEMPORARILY), but then display the textarea value after that on the page.

<textarea><span style="color: blue">Test</p></textarea><br />

Show textarea here: <span id="show"></span>

My jQuery

$("#show").html($("textarea").val());

http://jsfiddle.net/vQD5w/

That is how I show the textarea content at the moment, and that is how it is going to look in the end. Meanwhile I want to hide the HTML code from the textarea, so what is inside the textarea does not look ugly and unreadable to the common PC user. Textarea should therefore only contain "Test" (no quotations).

So basically I want to escape all HTML tags, elements, and everything related to HTML INSIDE the textarea-tag, but use it later on.

Lemvig Kiggeren
  • 317
  • 1
  • 3
  • 13
  • 1
    Please balance out your markup: There's a `` that needs closing inside that textarea, and there's a `` without it's opening tag. – technophobia Jan 17 '14 at 22:00

5 Answers5

2

You could use regular expressions to strip out the tags, barring that you aren't trying to parse it.

$("#show").html($("textarea").val());
var text = $('textarea').val();
$('textarea').val(text.replace(/(<([^>]+)>)/ig,""));

Example: http://jsfiddle.net/brandonscript/ffC4q/

Community
  • 1
  • 1
brandonscript
  • 68,675
  • 32
  • 163
  • 220
0

This is what you want to do. Put the value of the textarea in the show span. Then get rid of the html tags from the textarea with a regular expression.

$inner = $("textarea").val();
$("#show").text($inner);
$('textarea').val(text.replace(/(<([^>]+)>)/ig,""));

As shown in this JSFiddle

Guy
  • 764
  • 1
  • 5
  • 18
  • No. I want to hide the **

    ** and **

    ** from the textarea field, but output the content of the textarea in the span tag at the bottom together with the p-tag. But no, I do not want to do "

    "; if you get that.

     – Lemvig Kiggeren Jan 17 '14 at 22:01
  • Ok I see now, I updated the answer. Please check the fiddle and make sure that's what you're looking for – Guy Jan 17 '14 at 22:05
0

You can achieve the desired result using a contenteditable div instead of a textarea. 

<div contenteditable='true'><span style="color: blue">Test</span></div><br />

And then you get the html instead of the val()

$("#show").html($("div").html());

you can put a border around the div if you want it to look like a text area.

http://jsfiddle.net/EnKLA/

eidsonator
  • 1,319
  • 2
  • 11
  • 25
0

You can do it by replacing html tags with regex:

HTML:

<textarea id="textArea"><span style="color: blue">Test</span></textarea><br />

Show textarea here: <span id="show"></span>

JS:

var textWOHTML = $("textarea").val().replace(/<(.|\n)*?>/, '').replace(/<\/(.|\n)*?>/, '');
var textWithHTML = $("textarea").val();
$('#textArea').val(textWOHTML);
$("#show").html(textWithHTML);

Here is the fiddle: http://jsfiddle.net/vQD5w/2/

Caner Akdeniz
  • 1,862
  • 14
  • 20
-2

Since I clearly misunderstood his exact need, I've removed my suggestion!

Dan H
  • 606
  • 4
  • 6