CODEWITHSUNDEEP
javascriptjqueryhtml
Jignesh
Jignesh

Reputation: 71

Prohibiting specific HTML tags in textarea using JavaScript

How can I use JavaScript to prevent the user from entering these HTML tags in a textarea?

<style></style>
<script></script>
<embeded></embeded>
<img src="" />

Upvotes: 4

Views: 6304

Answers (5)

Adrian Maire
Adrian Maire

Reputation: 14815

I have written the following answer that is a generalization of this problem. Just reduce the list of tags of the regexp to your own list.

JavaScript - Detect HTML

Upvotes: 0

xkeshav
xkeshav

Reputation: 54016

Javascript way:

html

<textarea id="mytext" onChange="stripHTML(this.value);"></textarea>

js

<script>
function stripHTML(oldString) {
  var result=(/<img.*|<script.*|<style.*|<embeded.*/ig).test(oldString);
  alert('Input is :'+!result);  
}
</script>

jQuery way:

// remove onChange="stripHTML(this.value);" from html and do below
   <script>
   $(document).ready(function() {
    $('#mytext').live ('mouseleave change', function () { 
       var textVal= $(this).val();
       var result=(/<img.*|<script.*|<style.*|<embeded.*/ig).test(textVal);
        alert('input is:'+!result); 
    });
});

DEMO

One useful link

RUBULAR TEST

Upvotes: 1

sergio
sergio

Reputation: 69027

One possibility is using onChange event handler associated to your text area:

<textarea onchange="javascript:sanitizeHTML(this);>...</textarea>

In this way, your sanitizeHTML will be called whenever the text area content changes (focus out), and you can do your validation there by using regex.

If you prefer a more timely action to prevent user from entering the HTML you mention, you could define an onkeyup event handler as well, but you should be very careful about the implementation of your validating code as to its performance.

In your sanitizeHTML, you could use str.replace with some proper regex to remove unwanted content.

function sanitizeHTML(object) {
    object.value.replace("<embed>.*?</embed>", "");
    <etc for other tags>
}

Note: I have not checked the code and wrote it quite quickly...

Upvotes: 2

Muhammad Zeeshan
Muhammad Zeeshan

Reputation: 8856

This might take you to the right direction.help and this

str=(document.getElementById('exp')).value;
        if(str.match(/([\<])([^\>]{1,})*([\>])/i)==null)
         alert("No HTML Tag");
        else
         alert("Contains HTML Tag");

or 

var htstring = '<p align="Left"><b>Hello</b> <I>World</I></p>'; 
var stripped = htstring.replace(/(<([^>]+)>)/ig,""); 

with (document) { 
write ('Original string:' + htstring + '<br>'); 
write ('Stripped string:<br><br>' + stripped); 
}

Upvotes: 1

DavidO
DavidO

Reputation: 13942

There's a concern that sometimes is missed with respect to client side input validation with Javascript: It's possible for the validation process to be bypassed programatically, enabling the client to send tags (or in a more general sense, data) that your server-side script isn't expecting. For example, someone could write a mechanized scraper that sends a GET or POST request directly to your server-side script. Doing so bypasses the javascript input validation. If your server-side script isn't also checking for valid input, it could get ugly. In the worst case, a malicious user could take advantage of lax server-side scrubbing by possibly injecting data that would be harmful.

Javascript can, therefore, be used to 'encourage' well-behaved input, but it's not a substitute for rigorous server-side validation and scrubbing too.

Upvotes: 2

Related Questions