JavaScript-检测HTML

我有一个HTML textarea元素。我想阻止用户在此区域输入任何HTML标记。如何检测用户是否使用JavaScript输入了任何HTML文本区域

---

谢谢

首先，请记住，您需要在服务器端重新验证，因为任何人都可以伪造http帖子，如果他们禁用了javascript，那么您当然无法控制：）

我要做的是

<textarea onkeypress="disableHtml(this);" name="text"></textarea>

对于javascript

function disableHtml(element) {
  element.value = element.value.replace(/[<>]/g, '');
}

函数禁用HTML（元素）{
element.value=element.value.replace（/[]/g'，）；
}

另一种方法是在服务器端用和替换<和>，这是更好的方法，因为它很安全，人们仍然可以皱眉>：）

---

[编辑：如果您只想检测某些标记，您可以将regexp设置得尽可能聪明]

其中一种方法是，当按下的键匹配时，让

按键

事件返回

false

。为了区分真正的HTML标记和无辜的“小于”和“大于”标记，您可能需要在其中加入一些正则表达式。由于无法使用正则表达式可靠地解析HTML。。。然而，有一种方法：

var sanitized=$（''）.html（textareavalue.text（）；

---

然而，通常的做法是让客户端输入它想要的任何内容，并在服务器端视图技术的显示过程中清理HTML。如何做到这一点取决于您使用的视图技术。例如，在PHP中可以使用它，在JSP/JSTL中可以使用。由于客户端可以禁用/黑客攻击/欺骗Javascript，因此这更加健壮。

您可以使用正则表达式，如

if ( textArea.value.match(/<\/*[a-z][^>]+?>/gi) ) {
  // do something about it
}

if（textArea.value.match（/]+？>/gi））{
//做点什么
}

---

<> >“TexTaReA”是您的代码“TeXTaRea<代码>元素的ID。

< P>您认为HTML标签是什么？

是标签吗？

i4

中的中间字符是什么

---

我认为你不应该严格限制用户。不要成为史蒂夫·乔布斯。

最初的考虑：

• XML！=HTML，所以我会考虑HTML是不允许的，但是它是XML。
• 应该删除所有html标记，而不仅仅是转义（转义html更容易）
• 我们不希望用户在写东西时丢失指针的位置（这非常令人担忧）

首先，定义一个函数，用“”替换html标记：

第三，创建一个主函数，从textarea中删除html标记并设置carret位置

/**
 * This function get/set the position of the carret in a node.
 * If the value is set, this function try to set the new position value.
 * Anyway, it return the (new) position.
 * @param {Element} node The textarea element
 * @param {int} value The new carret position
 * @return {int} The (new) carret position 
 */
function caretPosition(node, value) 
{
    // Set default Caret pos, will be returned if this function fail.
    var caretPos = 0;

    // Ensure that value is valid
    value = parseInt(value);

    // Set the new caret position if necesary
    if (!isNaN(value)) // We want to set the position
    {
        if (node.selectionStart)
        {
            node.selectionStart=value;
            node.selectionEnd= value;
        }
        else if(node.setSelectionRang)
        {
            node.focus();
            node.setSelectionRange(value, value);
        }
        else if (node.createTextRange)
        {
            var range = node.createTextRange();
            range.collapse(true);
            range.moveEnd('character', value);
            range.moveStart('character', value);
            range.select();
        }
    }

    // Get the position to return it.
    if (node.selectionStart) return node.selectionStart;
    else if (document.selection)
    {
        node.focus();
        var sel = document.selection.createRange();
        sel.moveStart('character', -node.value.length);
        caretPos = sel.text.length;
    }

    return caretPos;
}

/**
 * This event function remove html tags from the textarea with id=text 
 */
function updateText()
{
    // Get the textarea
    var t = document.getElementById('text');

    // Get the caret position
    var pos = caretPosition(t);

    // Remove html from the text
    var result = removeHtmlTags(t.value, pos);
    t.value = result.text;

    // Set the new caret position
    caretPosition(t, result.pos);
}

最后，添加事件侦听器以在修改时更新textarea：

• 按键
• 过去的
• 下降

我们应该能够对所有3个事件使用“oninput”，但（ofc）IE失败

HTML:

我希望它能帮助你：-）

---

Escain

如果有人粘贴了一些标记，这仍然会保留HTML元素的主体-元素名称和属性等。是的，但它不是有效的HTML，因此不重要。无论如何，服务器端清理绝对是最好的策略。这是一种糟糕的方法。正如@robusto所说，但@odea忽略了，简单的粘贴和提交将绕过此方法。没有客户端方法可以避免100%绕过它。这就是为什么我一直提倡服务器端的东西@robusto说，如果我理解的话，如果有人粘贴进来，它仍然会显示一个没有的name=“hi”，仅此而已。还是我误解了你，robusto？服务器端验证是可能的最佳实践。。。如果您正在练习客户端验证，为什么我不能编写一个网页，将我的用户名作为

“DELETE*FROM*”

发送给您？[或者在您的情况下，window.location=“virus.com”；在保存到数据库之前，您还可以进行清理（以不同的方式）。+1表示

htmlspecialchars

（以及其他语言中的类似物）.HTML在输出时转义绝对是处理

问题的正确方法。您不想为此使用Javascript。仅在webbrowser中禁用Javascript已使XSS世界范围内打开。我敦促您返回并阅读此处的其他答案，您选择的解决方案非常糟糕。警告读者：不要这样做。阻止用户进入或者提交HTML从来都不是解决安全问题的明智方法。您必须在接收数据时过滤数据服务器端，或者（更好）在使用数据时处理问题（渲染或准备渲染）。
'<div>' -> ''
'<div selected' -> ' selected'
'<div selected>' -> ''
'<div    >' -> ''

/**
 * This function get/set the position of the carret in a node.
 * If the value is set, this function try to set the new position value.
 * Anyway, it return the (new) position.
 * @param {Element} node The textarea element
 * @param {int} value The new carret position
 * @return {int} The (new) carret position 
 */
function caretPosition(node, value) 
{
    // Set default Caret pos, will be returned if this function fail.
    var caretPos = 0;

    // Ensure that value is valid
    value = parseInt(value);

    // Set the new caret position if necesary
    if (!isNaN(value)) // We want to set the position
    {
        if (node.selectionStart)
        {
            node.selectionStart=value;
            node.selectionEnd= value;
        }
        else if(node.setSelectionRang)
        {
            node.focus();
            node.setSelectionRange(value, value);
        }
        else if (node.createTextRange)
        {
            var range = node.createTextRange();
            range.collapse(true);
            range.moveEnd('character', value);
            range.moveStart('character', value);
            range.select();
        }
    }

    // Get the position to return it.
    if (node.selectionStart) return node.selectionStart;
    else if (document.selection)
    {
        node.focus();
        var sel = document.selection.createRange();
        sel.moveStart('character', -node.value.length);
        caretPos = sel.text.length;
    }

    return caretPos;
}

/**
 * This event function remove html tags from the textarea with id=text 
 */
function updateText()
{
    // Get the textarea
    var t = document.getElementById('text');

    // Get the caret position
    var pos = caretPosition(t);

    // Remove html from the text
    var result = removeHtmlTags(t.value, pos);
    t.value = result.text;

    // Set the new caret position
    caretPosition(t, result.pos);
}

<html>
    <head>
        <script type="text/javascript">
           <!-- Copy all the js code here. -->
        </script>
    </head>
    <body>
        <textarea cols="50" rows="10" oninput="updateText();" 
            ondrop="setTimeout('updateText();',0);" 
            onpaste="setTimeout('updateText();',0);" 
            onkeyup="updateText();" id='text'></textarea>
    </body>
</html>