How would I sanitize this string? (preferably in JQuery)?

Question

I have a webpage where people type stuff into a text box, and it displays that text below them. That's it. There is no server side.

Let's say someone types <script src="blah">hello</script>

I want to display that as text. Not as a script, of course. How can I do that (all in javascript)?

I want to display the entire text. Don't stip the tags out.

then use `var txt = $('div').text();` Read https://stackoverflow.com/questions/1910794/what-is-the-difference-between-jquery-text-and-html — csandreas1, Jan 30 '19 at 08:20

score 18 · Accepted Answer · answered Apr 30 '11 at 07:38

18

$('div.whatever').text($('input.whatever').val());

That'll convert things to HTML entities, so they're displayed as they were typed, and not treated as markup.

answered Apr 30 '11 at 07:38

David Fells

6,678
1
22
34

score 1 · Answer 2 · answered Apr 30 '11 at 07:37

1

If you want to display it in an element, you can use the text method. It will escape all the HTML for you.

You can see an example here.

answered Apr 30 '11 at 07:37

icktoofay

126,289
21
250
231

1

@TIMEX: It escapes it, not deletes it. – icktoofay Apr 30 '11 at 07:40

score 1 · Answer 3 · answered Apr 30 '11 at 07:48

1

<input type="text" onkeyup="$('#outputDiv').text($(this).val());" />
<div id="outputDiv"></div>

answered Apr 30 '11 at 07:48

bloodcell

601
1
9
23

score 0 · Answer 4 · answered Jan 05 '22 at 20:19

A quick way to sanitize any string in general with JQuery would be create a temporary element, set the text content with the text method and then retrieve the escaped text with text again.

const unsanitized = '<script>alert()></script>'

// Outputs '<\script>alert()><\/script>'
const sanitized = $("<p>").text(unsanitized).text()

How would I sanitize this string? (preferably in JQuery)?

4 Answers4