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

user447356
– user447356

2011-05-02 07:18:47 +00:00
Commented May 2, 2011 at 7:18 — user447356
– user447356, Commented May 2, 2011 at 7:18

Community · Accepted Answer · 2017-05-23 12:03:12Z

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, 2017 at 12:03

CommunityBot

11 silver badge

answered May 2, 2011 at 8:02

jimy

4,9183 gold badges37 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Gumbo · Accepted Answer · 2011-05-02 20:01:28Z

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 2, 2011 at 20:01

answered May 2, 2011 at 8:15

Gumbo

657k112 gold badges792 silver badges852 bronze badges

Comments

Mark · Accepted Answer · 2011-05-02 07:36:26Z

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 2, 2011 at 7:36

Mark

3,2714 gold badges34 silver badges57 bronze badges

2 Comments

Álvaro González Over a year ago

Doing this kind of things with vanilla JavaScript kind of beats the purpose of using a framework.

Mike Samuel Over a year ago

This does not encode & as & so the string "<&>" will incorrectly encode to the HTML equivalent of the plain text string "<&>".

Álvaro González · Accepted Answer · 2011-05-02 07:41:41Z

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 2, 2011 at 7:41

Álvaro González

147k45 gold badges282 silver badges378 bronze badges

Comments

Bruce Aldridge · Accepted Answer · 2011-05-02 08:20:02Z

0

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

answered May 2, 2011 at 8:20

Bruce Aldridge

2,9374 gold badges23 silver badges31 bronze badges

Comments

dtbarne · Accepted Answer · 2011-06-16 18:33:32Z

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, 2011 at 18:33

dtbarne

8,2505 gold badges47 silver badges49 bronze badges

1 Comment

dtbarne Over a year ago

Wow, I came to the party late. Sorry!

Collectives™ on Stack Overflow

html_entities in javascript

6 Answers 6

Comments

Comments

2 Comments

Comments

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

2 Comments

Comments

Comments

1 Comment

Linked

Related