如何使用javascript仅删除字符串中的html标签答案

【问题标题】：How to remove only html tags in a string using javascript如何使用javascript仅删除字符串中的html标签
【发布时间】：2013-06-18 08:42:41
【问题描述】：

我想使用 javascript 从给定字符串中删除 html 标签。我研究了当前的方法，但存在一些未解决的问题。

当前解决方案

(1) 使用javascript，创建虚拟div标签并获取文本

  function remove_tags(html)
  {
       var tmp = document.createElement("DIV");
       tmp.innerHTML = html; 
       return tmp.textContent||tmp.innerText; 
  }

(2) 使用正则表达式

  function remove_tags(html)
  {
       return html.replace(/<(?:.|\n)*?>/gm, '');
  }

(3) 使用 JQuery

  function remove_tags(html)
  {
       return jQuery(html).text();
  }

这三种方案都可以正常工作，但是如果字符串是这样的

  <div> hello <hi all !> </div>

剥离的字符串就像 hello 。但我只需要删除 html 标签。喜欢hello <hi all !>

已编辑：背景是，我想删除特定文本区域的所有用户输入 html 标记。但我想让用户输入<hi all> 类型的文本。在当前方法中，它会删除包含在 .

中的任何内容

【问题讨论】：

如果你想对无效的 HTML 进行特殊的解析规则，你需要编写一个解析器。请注意，最后一个 jQuery 版本与第一个版本没有什么不同，并且正则表达式不会为琐碎的输入以外的任何事情做这项工作。
对 RobG 的评论的补充：如果您解释一下背景可能会有所帮助，以便我们提出更好的解决方案。你为什么要为此使用 JavaScript？来自哪里的 HTML 无效？
@RobG：在这种特殊情况下，我不同意。我想我在下面有一个相当强大的解决方案，非常感谢您的意见。
@chacka 关于您的编辑：您不应该为此使用 JavaScript。 JavaScript 很容易被绕过，删除危险的 HTML 很重要。例如在服务器端使用标记库，就像 Stackoverflow 在本网站上所做的那样。他们将删除和/或转义任何有问题的 HTML。
@RoToRa：Stack Overflow 还提供使用 JavaScript 呈现的实时预览。不过我同意，常识说在存储到数据库或输出到页面之前在服务器上进行清理。

标签： javascript jquery html string

【解决方案1】：

如果您考虑不同的方法，使用正则表达式可能不是问题。例如，查找所有标记，然后检查标记名称是否与已定义的有效 HTML 标记名称列表匹配：

var protos = document.body.constructor === window.HTMLBodyElement;
    validHTMLTags  =/^(?:a|abbr|acronym|address|applet|area|article|aside|audio|b|base|basefont|bdi|bdo|bgsound|big|blink|blockquote|body|br|button|canvas|caption|center|cite|code|col|colgroup|data|datalist|dd|del|details|dfn|dir|div|dl|dt|em|embed|fieldset|figcaption|figure|font|footer|form|frame|frameset|h1|h2|h3|h4|h5|h6|head|header|hgroup|hr|html|i|iframe|img|input|ins|isindex|kbd|keygen|label|legend|li|link|listing|main|map|mark|marquee|menu|menuitem|meta|meter|nav|nobr|noframes|noscript|object|ol|optgroup|option|output|p|param|plaintext|pre|progress|q|rp|rt|ruby|s|samp|script|section|select|small|source|spacer|span|strike|strong|style|sub|summary|sup|table|tbody|td|textarea|tfoot|th|thead|time|title|tr|track|tt|u|ul|var|video|wbr|xmp)$/i;

function sanitize(txt) {
    var // This regex normalises anything between quotes
        normaliseQuotes = /=(["'])(?=[^\1]*[<>])[^\1]*\1/g,
        normaliseFn = function ($0, q, sym) { 
            return $0.replace(/</g, '&lt;').replace(/>/g, '&gt;'); 
        },
        replaceInvalid = function ($0, tag, off, txt) {
            var 
                // Is it a valid tag?
                invalidTag = protos && 
                    document.createElement(tag) instanceof HTMLUnknownElement
                    || !validHTMLTags.test(tag),

                // Is the tag complete?
                isComplete = txt.slice(off+1).search(/^[^<]+>/) > -1;

            return invalidTag || !isComplete ? '&lt;' + tag : $0;
        };

    txt = txt.replace(normaliseQuotes, normaliseFn)
             .replace(/<(\w+)/g, replaceInvalid);

    var tmp = document.createElement("DIV");
    tmp.innerHTML = txt;

    return "textContent" in tmp ? tmp.textContent : tmp.innerHTML;
}

工作演示：http://jsfiddle.net/m9vZg/3/

这是因为如果 '>' 不是匹配的 '

这也是未来的证明：WebIDL 规范告诉供应商如何实现 HTML 元素的原型，因此我们尝试从当前匹配的标签创建一个 HTML 元素。如果元素是HTMLUnknownElement 的实例，我们就知道它不是有效的HTML 标记。 validHTMLTags 正则表达式为不实现这些原型的旧浏览器（例如 IE 6 和 7）定义了 HTML 标记列表。

【讨论】：

好主意！使用负前瞻而不是替换函数会更简单。 jsfiddle.net/m9vZg/2
@thg435：你是对的，但我在编写它时考虑到了一种更好的检测方法，我刚刚在其中进行了编辑；-) 较新的浏览器现在不使用 validHTMLTags 正则表达式。
关闭，但是像“foo
foo<div and bar> => "foo"。无法绕过它，您必须构建一个适当的验证解析器（这将与当前和过去的 HTML 规范不兼容）。你正在一点一点地到达那里。 :-) 查找非标准标签可能更简单，将 &lt; 替换为 &lt; 并执行 textContent/innerText 的操作。
OP 想要显示任何不是有效标签的东西，我认为这是一个奇怪的要求，因为 HTML 解析器不会显示任何它认为是标签的东西，即使是无效标签，但它会显示内容。简单的解决方案是首先不要有无效标签，但要求是在客户端修复问题。因此，我的建议是让无效标签根本不是标签，而是让它们看起来像标签（&lt; 到 &lt; 的东西）并将其留给 HTML 解析器。无论如何，这是我的理论。 :-) 我认为你已经比我预期的更接近了。

【解决方案2】：

如果您想保持无效标记不变，正则表达式是您的最佳选择。这样的事情可能会起作用：

 text = html.replace(/<\/?(span|div|img|p...)\b[^<>]*>/g, "")

将(span|div|img|p...) 扩展为all tags 的列表（或仅您想要删除的列表）。注意：列表必须按长度排序，较长的标签在前！

这可能会在某些极端情况下提供不正确的结果（例如带有<> 字符的属性），但唯一真正的替代方法是自己编写一个完整的 html 解析器。并不是说它会非常复杂，但在这里可能有点矫枉过正。让我们知道。

【讨论】：

请注意，在 HTML5 中，除了空格之外的任何字符在 ID 中都是有效的，所以我的 ID 可以是“foo>”。现在呢？

【解决方案3】：

var StrippedString = OriginalString.replace(/(<([^>]+)>)/ig,"");

【讨论】：

这不适用于无 html 标签。例如：如果字符串是
hi
，那么这个正则表达式也会删除。
试试<div id="foo>bar">foo bar</div>。

【解决方案4】：

这是我的解决方案，

function removeTags(){
    var txt = document.getElementById('myString').value;
    var rex = /(<([^>]+)>)/ig;
    alert(txt.replace(rex , ""));

}

【讨论】：

【解决方案5】：

我使用正则表达式来阻止我的文本区域中的 HTML 标记

示例

<form>
    <textarea class="box"></textarea>
    <button>Submit</button>
</form>
<script>
    $(".box").focusout( function(e) {
        var reg =/<(.|\n)*?>/g; 
        if (reg.test($('.box').val()) == true) {
            alert('HTML Tag are not allowed');
        }
        e.preventDefault();
    });
</script>

【讨论】：

【解决方案6】：

<script type="text/javascript">
function removeHTMLTags() {           
var str="<html><p>I want to remove HTML tags</p></html>";
alert(str.replace(/<[^>]+>/g, ''));
    }</script>

【讨论】：

更多详情请参考此链接：ourcodeworld.com/articles/read/376/…