html_entities in javascript

Question

Here i have a textbox in which user inputs html tags like <h1>hello</h1> then i append that text to a td with

 var text = $('textbox').val();
 $('table').append('<tr><td style="padding:0px 12px;color:black">'+(text)+'</td></tr>');

Now what i want is the text in the td should come text as entered <h1>hello</h1> and not hello with h1 tag

I tried escape and unscape but it didnt helped

possible duplicate of [Javascript/JQuery HTML Encoding](http://stackoverflow.com/questions/1219860/javascript-jquery-html-encoding) — Shadow The GPT Wizard, May 02 '11 at 07:18

score 2 · Accepted Answer · edited May 23 '17 at 12:03

2

Used encode function from here HTML-encoding lost when attribute read from input field

function htmlEncode(value){
  return $('<div/>').text(value).html();
}

 var text = htmlEncode($('textbox').val());
 $('table').append('<tr><td style="padding:0px 12px;color:black">'+(text)+'</td></tr>');

edited May 23 '17 at 12:03

Community

1
1

answered May 02 '11 at 08:02

jimy

4,848
3
35
52

Gumbo · Answer 2 · 2011-05-02T20:01:28.723

1

Here’s a plain JavaScript function without the jQuery overkill:

function htmlEncode(str) {
    return str.replace(/[<>&"']/g, function($0) { return "&" + {"<":"lt",">":"gt","&":"amp",'"':"quot","'":"#39"}[$0] + ";"; });
}

This looks for any occurrence of <, >, &, ", and ', calls the function that then looks up the matched character and returns the corresponding character reference.

edited May 02 '11 at 20:01

answered May 02 '11 at 08:15

Gumbo

643,351
109
780
844

score 0 · Answer 3 · answered May 02 '11 at 07:36

0

You could try replacing the < by < and > by >

var text = $('textbox').val();
text = text.replace(/</g,'&lt;').replace(/>/g,'&gt;');
$('table').append('<tr><td style="padding:0px 12px;color:black">'+(text)+'</td></tr>');

You can test it yourself here: http://jsfiddle.net/W7RWA/

answered May 02 '11 at 07:36

Mark

3,231
3
32
57

1

Doing this kind of things with vanilla JavaScript kind of beats the purpose of using a framework. – Álvaro González May 02 '11 at 07:57
1

This does not encode & as & so the string "<&>" will incorrectly encode to the HTML equivalent of the plain text string "<&>". – Mike Samuel May 02 '11 at 15:38

score 0 · Answer 4 · answered May 02 '11 at 07:41

0

You need to set the node value with the val() method:

// Untested
var text = $('textbox').val();
var tr = $('<tr><td style="padding:0px 12px;color:black"></td></tr>');
tr.find("td").val(text);
$('table').append(tr);

answered May 02 '11 at 07:41

Álvaro González

142,137
41
261
360

score 0 · Answer 5 · answered May 02 '11 at 08:20

if you want html_entities ....

try the phpjs project

https://github.com/kvz/phpjs/blob/master/functions/strings/htmlentities.js

.. it also requires this function though https://github.com/kvz/phpjs/blob/master/functions/strings/get_html_translation_table.js

score 0 · Answer 6 · answered Jun 16 '11 at 18:33

0

PHPJS is an excellent resource for these sorts of "How can I use this PHP function in Javascript?" questions.

Javascript htmlentities()

answered Jun 16 '11 at 18:33

dtbarne

8,110
5
43
49

Wow, I came to the party late. Sorry! – dtbarne Jun 16 '11 at 18:35

html_entities in javascript

6 Answers6