Getting inner html without escaping or decoding anything with jQuery

Question

I am developing some kind of online html editor and I have a problem with getting the content of a textarea with jQuery.

The Textarea element is like this:

<textarea id="myText"><b>&lt;p&gt;TEST&lt;/p&gt;</b></textarea>

So it is a mixture of escaped and unescaped text. However, the browser shows the textarea like this, which is also something that I don't want :

<b><p>TEST</p></b>

I want to get the inner html of the textarea as it is. If I try .html(), it escapes all the tags and if I try .val(), it decodes the escaped tags. You can see the behavior at http://jsfiddle.net/hnBte/

How can I get the pure content with Javascript and optionally, how can I make the textarea show the content as it is?

Thanks

score 8 · Accepted Answer · edited May 23 '17 at 12:16

8

I found this a really interesting question, so I did some research: I tried all javascript and jQuery functions to see what I would get, but nothing worked. You can only get completely unparsed or completely parsed html.

I also stumbled upon this SO-question, that also confirms that, sadly, it just can't be done: Getting raw text content of HTML element with HTML uninterpreted.

edited May 23 '17 at 12:16

Community

1
1

answered Apr 27 '13 at 14:17

Terrabythia

2,031
3
19
29

$("#myText").val( $("#myText").html() ); isn't it what you are looking for? http://jsfiddle.net/WC7gX/1/ – A. Wolff Apr 27 '13 at 14:24
1

@roasted no it is not. I give mixed(escaped and unescaped) html text and I want to see/get that as it is – Ahmet Eren Başak Apr 27 '13 at 14:35
1

Someone solved this here: https://stackoverflow.com/a/7394787/2057171 – Albert Renshaw Apr 29 '21 at 05:35
@AlbertRenshaw unfortunately, no... See my updated (and unsuccessfull) JSFiddle here: http://jsfiddle.net/y2p0fhtd/5/ – Terrabythia May 04 '21 at 08:23

score 4 · Answer 2 · answered May 06 '21 at 05:03

4

For anyone asking this in 2021.. My solution was to take the text in place it in a different textarea using .innerHTML, then using document.getElementById("area").textContent to get the plain text, without encoding or escaping.

answered May 06 '21 at 05:03

anitag95

307
2
16

score 0 · Answer 3 · answered Apr 27 '13 at 13:58

0

Try .text() method in jQuery. http://api.jquery.com/text/

answered Apr 27 '13 at 13:58

Chamara Keragala

5,627
10
40
58

`.text()` returns the same result as `.val()` – Ahmet Eren Başak Apr 27 '13 at 14:02

score 0 · Answer 4 · edited May 23 '17 at 10:28

0

Can you not use the standard JavaScript .innerHTML?

Here is a related post about the differences between JavaScript .innerHTML and JQuery .HTML() https://stackoverflow.com/a/3563136/2099977

edited May 23 '17 at 10:28

Community

1
1

answered Apr 27 '13 at 14:04

Paul Welbourne

1,063
10
16

That has the same effect as jQuery's .html() – Terrabythia Apr 27 '13 at 14:07
`innerHTML` returns the same value as `.html()` while `textContent` returns the decoded form like `.val()` – Ahmet Eren Başak Apr 27 '13 at 14:08
I'm not sure you can do this since the browser has already interpreted the mark-up and the raw <p>TEST</p> values have been converted to html. I think you can only get the whole contents as HTML using `.val()` or the whole contents HTMLencoded using `.innerHTML`. – Paul Welbourne Apr 27 '13 at 14:21

score 0 · Answer 5 · answered Oct 08 '14 at 00:27

0

Capture the input as the user enters it, or when you load it from an external source.

answered Oct 08 '14 at 00:27

mtyson

8,196
16
66
106

Getting inner html without escaping or decoding anything with jQuery

5 Answers5

Linked