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? — user3310334
– user3310334, Commented Mar 30, 2014 at 16:03

A. Wolff · Accepted Answer · 2014-03-30 15:34:53Z

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, 2014 at 15:34

answered Mar 30, 2014 at 15:29

A. Wolff

74.4k9 gold badges98 silver badges158 bronze badges

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

6 Comments

user3310334 Over a year ago

You need to still be able to have tags like <b> take effect on the writing? is that possible?

A. Wolff Over a year ago

@minseong That's already the case in posted jsFiddle: jsfiddle.net/5AVLd or i don't understand what you mean by "take effect on the writing"?

user3310334 Over a year ago

Sorry, I missed that. Have upvoted your answer, it is the better one.

user3310334 Over a year ago

May I suggest these very slight changes to your jsFiddle: jsfiddle.net/theonlygusti/WfDqM/1, basically just including the h1 as text rather than an element.

A. Wolff Over a year ago

@WalkOfLife fixed jsFiddle, you need to use any relevant method for checking: jsfiddle.net/5AVLd/2

|

Community · Accepted Answer · 2017-05-23 10:31:50Z

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, 2017 at 10:31

CommunityBot

11 silver badge

answered Mar 30, 2014 at 15:28

user3310334

3 Comments

A. Wolff Over a year ago

you'll replace only first occurence here, you should pass a regex as parameter, not string. BTW, this won't replace e.g <h1 style="..."> nor </h1>, etc...

user3310334 Over a year ago

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.

A. Wolff Over a year ago

You shouldn't use regex to try to parse HTML, see: stackoverflow.com/a/590789/1414562

Collectives™ on Stack Overflow

Disable some html output in input box

2 Answers 2

6 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related