我怎样才能脱离字符串中的某些HTML标签？ [英] How can I strip certain html tags out of a string?

问题描述

我有一个用户键入内容的< textarea> ，并允许他们键入html。完成输入后，< textarea> 变回到< span> 类型。但是，我想删除某些标签，如< script> ，< div> 等。 。在将它放回< span> 。

解决方案

相信与否你可以（安全地）用浏览器内置的HTML解析器来做到这一点。只需用 document.createElement 创建一个新的div，使用 innerHTML 折腾textarea的内容到div中，然后presto ，你有一个完整的DOM来处理。不是，这个div中包含的脚本将不被评估。

下面是一个简单的例子，它从一个元素中去掉所有没有出现的标签在 ALLOWED_TAGS 列表中。

  var ALLOWED_TAGS = [STRONG， EM，BLOCKQUOTE，Q，DEL，INS，A]; 
 
函数清理（el）{
删除不在ALLOWED_TAGS列表中的元素el中的所有标记。 
 var tags = Array.prototype.slice.apply（el.getElementsByTagName（*），[0]）; 
 for（var i = 0; i< tags.length; i ++）{
 if（ALLOWED_TAGS.indexOf（tags [i] .nodeName）== -1）{
 usurp（标签[I]）; 
 
 
 
 $ b函数usurp（p）{
用其子元素替换父'p'。 
 var last = p; 
 for（var i = p.childNodes.length  -  1; i> = 0; i--）{
 var e = p.removeChild（p.childNodes [i]）; 
 p.parentNode.insertBefore（e，last）; 
 last = e; 
} 
 p.parentNode.removeChild（p）; 
 
 
 
 
 
 $ b如前所述，你必须创建一个空的div容器来使用这个。下面是该技术的一个示例应用程序，一个用于清理字符串的函数。但是，请注意，清理在这个时候是不恰当的 - 在这个清理程序将输出真正安全的HTML之前，它会花费更多的工作（清理属性字符串等）。
 函数sanitizeString（string）{
 var div = document.createElement（div）; 
 div.innerHTML = string; 
 sanitize（div）; 
返回div.innerHTML; 
} 
  
 
I have a <textarea> that a user types something in, and they are allowed to type html. Once they are done typing, the <textarea> changes back to a <span> that contains what they just typed. However, I want to strip out certain tags such as <script>, <div>, etc... before I put it back into the <span>.
解决方案
Believe it or not you can (safely) do this with the browser's built in HTML parser. Simply create a new div with document.createElement, toss the contents of the textarea into the div using innerHTML, and presto, you've got a full blown DOM to work with. And no, scripts contained within this div will not be evaluated.

Here's a simple example that strips from an element all tags that do not appear in an ALLOWED_TAGS list.
var ALLOWED_TAGS = ["STRONG", "EM", "BLOCKQUOTE", "Q", "DEL", "INS", "A"];

function sanitize(el) {
    "Remove all tags from element `el' that aren't in the ALLOWED_TAGS list."
    var tags = Array.prototype.slice.apply(el.getElementsByTagName("*"), [0]);
    for (var i = 0; i < tags.length; i++) {
        if (ALLOWED_TAGS.indexOf(tags[i].nodeName) == -1) {
            usurp(tags[i]);
        }
    }
}

function usurp(p) {
    "Replace parent `p' with its children.";
    var last = p;
    for (var i = p.childNodes.length - 1; i >= 0; i--) {
        var e = p.removeChild(p.childNodes[i]);
        p.parentNode.insertBefore(e, last);
        last = e;
    }
    p.parentNode.removeChild(p);
}​
As mentioned, you'll have to create an empty div container to use this. Here's one example application of the technique, a function to sanitize strings. Please note, however, that "sanitize" is at this time a misnomer--it will take a lot more work (cleaning attribute strings and such) before this "sanitizer" will output HTML that is truly safe.
function sanitizeString(string) {
    var div = document.createElement("div");
    div.innerHTML = string;
    sanitize(div);
    return div.innerHTML;
}


                        
这篇关于我怎样才能脱离字符串中的某些HTML标签？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！