DEMO

Question

如何使用JavaScript阻止用户在textarea中输入这些HTML标记？

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

Answer 1

关于使用Javascript进行客户端输入验证有时会遗漏一个问题：可能以编程方式绕过验证过程，使客户端能够发送服务器的标签（或更一般意义上的数据）边的脚本没有预料到。例如，有人可以编写一个机械化的scraper，直接向服务器端脚本发送GET或POST请求。这样做会绕过javascript输入验证。如果您的服务器端脚本也没有检查有效输入，那么它可能会变得很丑陋。在最糟糕的情况下，恶意用户可能会通过注入可能有害的数据来利用松散的服务器端清理。

因此，Javascript可用于“鼓励”良好的输入，但它也不能替代严格的服务器端验证和擦除。

Answer 2

一种可能性是使用与您的文本区域相关联的onChange事件处理程序：

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

这样，只要文本区域内容发生变化（焦点偏移），就会调用sanitizeHTML，您可以使用正则表达式进行验证。

如果您希望更及时的操作来阻止用户输入您提到的HTML，您也可以定义一个onkeyup事件处理程序，但是您应该非常小心验证代码的实现。性能

在sanitizeHTML中，您可以使用str.replace一些正确的正则表达式删除不需要的内容。

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

注意：我没有检查代码并写得很快......

Answer 3

Javascript方式：

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方式：

// 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

Answer 4

这可能会将您带到正确的方向。help和this

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

或

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); 
}

Answer 5

我写了以下答案，这是对这个问题的概括。只需将正则表达式的标记列表缩减到您自己的列表中即可。

JavaScript - Detect HTML

使用JavaScript禁止textarea中的特定HTML标记

5 个答案:

Javascript方式：

HTML

JS

jQuery方式：

DEMO

RUBULAR TEST