Disable some html output in input box

Question

I have an input that works like a chat box. (The user types something in the input and it outputs on the page). I just noticed that the user can also use html tags in my input box to change the output.

Example: If I typed <b>Hello</b>, the output text would be bolded and so on...

I don't want to disable this function completly. But there are some tags that I don't want outputted (example h1 or h2...). I think that's it's possible with regex (not sure how too proceed with that though), but I feel like there may be a easier solution, if not, just throw in whatever works.

The code below is what gets my input box to work:

$('form').on('submit', function(e){
    e.preventDefault();
    checkValue();
});

function checkValue() {
    var message = document.getElementById("userinput").value;
    $('#output').html(message);
}

Thanks.

possible duplicate of [How can I strip certain html tags out of a string?](http://stackoverflow.com/questions/11890664/how-can-i-strip-certain-html-tags-out-of-a-string) — theonlygusti, Mar 30 '14 at 16:03

score 1 · Answer 1 · edited May 23 '17 at 10:31

1

You need to add another part to your checkValue function:

function checkValue() {
    var text = document.getElementById("userinput").value;
    var message = text.replace(/<h1>/g,"&#60;h1&#62;");
    $('#output').html(message);
}

See how I have replaced all h1 elements with escaped characters and the text (h1).

This should work and you can repeat it again and again to get rid of everything you don't want, e.g.

function checkValue() {
    var text = document.getElementById("userinput").value;
    var check = text.replace(/<h1>/g,"&#60;h1&#62;");
    var check2 = check.replace(/<h2>/g,"&#60;h2&#62;");
    var message = check2.replace(/<table>/g,"&#60;table&#62;")
    $('#output').html(message);
}

There is more on the replace function here: http://www.w3schools.com/jsref/jsref_replace.asp

Here is a different way that I found on this site:

How can I strip certain html tags out of a string?

edited May 23 '17 at 10:31

Community

1
1

answered Mar 30 '14 at 15:28

theonlygusti

11,032
11
64
119

you'll replace only first occurence here, you should pass a regex as parameter, not string. BTW, this won't replace e.g `
` nor `
`, etc... – A. Wolff Mar 30 '14 at 15:37
Thankyou for pointing that out (first occurence), have updated my answer to fix that but will continue to work on it to solve the other problems. – theonlygusti Mar 30 '14 at 15:44
You shouldn't use regex to try to parse HTML, see: http://stackoverflow.com/a/590789/1414562 – A. Wolff Mar 30 '14 at 15:45

A. Wolff · Accepted Answer · 2014-03-30T15:34:53.973

1

See if that fits your needs:

var message = $('<div/>', {
    html: document.getElementById("userinput").value
}).find(':header').remove().end().html();

Or you could use e.g replaceWith(function(){return '<h>'+this.innerHTML+'</h>';}) instead of remove().

DEMO jsFiddle

edited Mar 30 '14 at 15:34

answered Mar 30 '14 at 15:29

A. Wolff

74,033
9
94
155

You need to still be able to have tags like `` take effect on the writing? is that possible? – theonlygusti Mar 30 '14 at 15:48
@theonlygusti That's already the case in posted jsFiddle: http://jsfiddle.net/5AVLd/ or i don't understand what you mean by "take effect on the writing"? – A. Wolff Mar 30 '14 at 15:49
Sorry, I missed that. Have upvoted your answer, it is the better one. – theonlygusti Mar 30 '14 at 15:53
May I suggest these _very_ slight changes to your jsFiddle: http://jsfiddle.net/theonlygusti/WfDqM/1/, basically just including the h1 as text rather than an element. – theonlygusti Mar 30 '14 at 15:59
@WalkOfLife `.find(':header, p, whatever selector here')` then you could filter it in `replaceWith()` by nodeType or using jQuery `is('selector')` method – A. Wolff Mar 30 '14 at 16:07
1

@WalkOfLife fixed jsFiddle, you need to use any relevant method for checking: http://jsfiddle.net/5AVLd/2/ – A. Wolff Mar 30 '14 at 16:18

Disable some html output in input box

2 Answers2

` nor `

Linked