在 JavaScript 中去除 HTML 标签 | CSS-Tricks

Dango

# 2010 年 8 月 27 日

您的脚本运行良好！干杯！

admire

# 2010 年 10 月 13 日

这太酷了，我喜欢它

Pushpinder Bagga

# 2010 年 11 月 7 日

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

JC

评论的永久链接# 2011 年 12 月 23 日

这对我来说甚至更好。没有特殊字符等问题……
Morgan Roderick

评论的永久链接# 2013 年 3 月 28 日

那真是糟糕的建议！

如果由于某些原因（例如用户恶意意图）html 参数包含一个脚本标签，那么您现在已经打开了 XSS 攻击的可能性！！！

不要将 DOM 用于不需要它的东西。

此外，DOM 非常慢。
Martin Adámek

评论的永久链接# 2013 年 6 月 1 日

此解决方案非常适合在 JS Alert 窗口中使用段落中的内部内容 - 它有效地去除了 nbsp 和 em，
谢谢
Venkat

评论的永久链接# 2015 年 9 月 9 日

Pushpinder,
太好了。效果很好
Nephi

评论的永久链接# 2021 年 2 月 10 日
如果您不需要支持 IE6，可以尝试直接使用 DOMParser，因为它不会下载图像或执行脚本
```
function stripHtml(dirtyString) {
  const doc = new DOMParser().parseFromString(dirtyString, 'text/html');
  return doc.body.textContent || '';
}
```
现在，如果您运行类似 stripHtml("<img onerror="alert(\"could run arbitrary JS here\")"" src="bogus">"); 的代码，它不会导致问题，同时仍然允许浏览器完成工作。
ashleedawg

评论的永久链接# 2021 年 9 月 13 日

单行代码

如果您碰巧使用的是 jQuery，这是一个 单行代码

txt=$(document.createElement("DIV")).html('<b>Hi</b>').text();

derek

# 2011 年 2 月 10 日

嘿!!!..这太荒谬了..

Eugene

# 2011 年 3 月 9 日

感谢您提供如此棒的示例

Sebastian

# 2011 年 8 月 2 日

谢谢，这正是我需要的（而且非常简洁！)

Ian

# 2011 年 8 月 18 日

谢谢！关于正则表达式的一个快速说明：“i”在这里并不需要，因为没有字符需要区分大小写。但是，它无论如何都会完全按照您的预期执行。

Porter

# 2011 年 10 月 14 日

不错，但括号是多余的。

.replace(/<[^>]+>/ig,””);

Jainam Shah

评论的永久链接# 2014 年 9 月 10 日

谢谢

Florian Ricard

# 2011 年 10 月 21 日

您好 :)

我看到了您的联系表格，我必须说我非常喜欢它！
您有教程或类似的东西吗？它太棒了：)^
希望收到您的消息，

一位法国读者，

Florian

Truong Duong

# 2011 年 10 月 22 日

感谢您的脚本 :)

@Ricard: 如果你想复制联系表单，只需查看源代码或将此页面保存到本地即可；)

jeu-jeu-jeu.net

# 2011 年 12 月 16 日

美丽的网站，感谢您提供如此棒的示例

DScout

# 2011 年 12 月 17 日

强烈建议使用 /i 进行区分大小写。
在使用 contenteditable 时，IE 会生成大写标签，mozilla 只会创建小写标签……要去除它们，您需要区分大小写。

do0g

评论的永久链接# 2014 年 5 月 2 日

DScout，这是不正确的。正则表达式中没有指定字母字符 - 因此，区分大小写修饰符不会影响任何内容。

Sadia

# 2011 年 12 月 25 日

您好

我有以下代码

var text = ‘[$ ssIncludeXml(docName,”wcm:root/wcm:element[@name=’innerpage_content’]/text()”) $]’;
var StrippedString = text.replace(/(]+)>)/ig,””);

其中 ‘[$ ssIncludeXml(docName,”wcm:root/wcm:element[@name=’innerpage_content’]/text()”) $]’
是 Idoc 脚本，它从占位符中获取 HTML 块。但我正在第一行得到“未终止的字符串文字”错误。

我要做的是去除或剥离所有 HTML 标签，并从该标记中获取纯文本。

请告诉我是否有任何解决方案。

谢谢

JOhn

# 2012 年 1 月 6 日

效果很好，但不会去除空格……

Valutar BNR

# 2012 年 3 月 2 日

谢谢！这对我来说非常有用，我认为这对每个人都有用。
再次感谢！

Elliott

# 2012 年 3 月 8 日

是的，这个解决方案删除了各种各样的 HTML，段落、换行符、内联样式等等等等

reena upadhyay

# 2012 年 3 月 29 日

这在 IE 中不起作用。请提供在所有浏览器中都能正常工作的去除标签的 javascript 解决方案

Shilpa Agrawal

# 2012 年 4 月 18 日

感谢您的脚本
效果很棒

Ammar

# 2012 年 4 月 19 日

我正在尝试它

var message;

    firstName = document.getElementById("username").value;

    if (firstName == null || firstName == "" || firstName == NaN || firstName == "First Name") {
        message = "Please Add some name.";
        document.body.insertAdjacentHTML("BeforeEnd", "" + message + "");
    }
    else {
        if (document.getElementById("myMessage")) {
            debugger;
            arguments = document.getElementById("myMessage").value.replace(/(]+)>)/ig, "");
        }
    }

但它不起作用，并显示

无法调用未定义的“replace”方法

Ryan Mc Closkey

# 2012 年 5 月 22 日

想知道如果我只想从一串文本中删除 href 标签，而不是删除所有标签，该如何实现？我正在尝试从网站检索一页文本，但我只想获取带格式标签（p、ul、li）的纯文本。
希望这说得通，提前谢谢。

DropTheNerd

# 2012 年 5 月 24 日

这太棒了！谢谢！

totingnya

# 2012 年 7 月 26 日

你的“\S”不见了……或者没有？

/(<\S([^>]+)>)/ig

do0g

评论的永久链接# 2014 年 5 月 2 日

\S 表示非空格，^> 表示非大于号，所以你修改后的正则表达式只确保不会替换单个字符标签。

javier

# 2012 年 10 月 19 日

太好了！谢谢！

Hemant Vaniya

# 2012 年 11 月 15 日

谢谢，
它运行良好。

Emmanuel Sayson

# 2012 年 11 月 16 日

酷！这完美地运行着……

anonymous

# 2012 年 11 月 28 日

< b r / > 或 < h r / > （自闭合标签）怎么样？

Nagarjuna Gottimukkala

# 2012 年 12 月 20 日

酷……好例子。

Jeremy

# 2013年3月14日

看起来“newInput”什么也没做？所以要么是多余的，要么是代码有问题。

Hardik Sondagar

# 2013年5月10日

我已经使用JavaScript正则表达式开发了相同的功能。
它将剥离所有 HTML 标签，除了用户在排除列表中提供的标签。
源代码也在 GitHub 上提供。
查看这里。 HTML 标签剥离器

Germano

# 2013年5月15日

不错，但这并不安全……我更愿意使用 jQuery。

$("<div/>").text('<img alt="a>b" src="a_b.gif" />').text();

Ahahahaha

# 2013年6月4日

document.body.innerText

<a onclick=”return a > b”> ~ 失败

SKV

# 2013年7月15日

但这段代码在处理 HTML 表格内容时效果不佳。

Al

# 2013年11月4日

如何剥离所有标签，除了锚点和图像标签？

Jonas

# 2013年11月29日

你可以轻松地省略大小写敏感性/i和分组()

var noHtml = hasHtml.replace(/<[^>]+>/ig, '')

duromir

# 2014年4月6日

使用 jQuery
jQuery(stringWithTags).text()

farzad

# 2015年3月10日

jQuery(stringWithTags).text();
这就是我想要的。感谢……

Muhammad Navaid

# 2015年6月23日

在 AngularJS 中不起作用。

Mohammad Mustafa Ahmedzai

# 2015年9月17日

可能是我在线找到的最简单的解决方案。非常感谢您。它运行良好！

Hamada Abdelaziz

# 2015年9月21日

这是我找到的最佳解决方案
http://phpjs.org/functions/strip_tags/
这相当于 PHP strip_tags 函数。

cccccccccc

# 2016年6月21日

string.replace(/\n/g, "");
string.replace(/[\t ]+\</g, "<");
string.replace(/\>[\t ]+\</g, "><");
string.replace(/\>[\t ]+$/g, ">");

Samantha

# 2016年8月2日

难道没有人看到这个解决方案会极大地影响这段文字吗？

舍入金额 < 3 对人们来说在计算中更容易使用，因为它们比 >= 3 的数字小得多。

变成：舍入金额 =3

Samantha

永久链接到评论# 2016年8月2日

这个更好；phpjs.org/functions/strip_tags/

mindfullsilence

# 2017年1月9日

使用 DOM 剥离 HTML 的安全方法。

function striptags(content) {
  var frag = document.createDocumentFragment();
  var innerEl = document.createElement('div');
  frag.appendChild(innerEl);
  innerEl.innerHTML = content;
  return frag.firstChild.innerText;
}
striptags('<script>alert("xss attack!")</script>');

Shaun

# 2018年1月14日

我将一个函数组合在一起，允许保留一些标签，类似于 PHP 函数的工作方式。

与 PHP 一样，它带有以下两个警告

因为 strip_tags() 实际上并没有验证 HTML，所以部分或损坏的标签可能会导致删除比预期更多的文本/数据。

和

这个函数不会修改你使用 allowable_tags 允许的标签上的任何属性，包括可能被恶意用户滥用以发布将显示给其他用户的文本的 style 和 onmouseover 属性。

/**
 * Native javascript function to emulate the PHP function strip_tags.
 * 
 * @param {string} str The original HTML string to filter.
 * @param {array|string} allowable_tags A tag name or array of tag
 * names to keep. Intergers, objects, and strings that don't follow the
 * standard tag format of a letter followed by numbers and letters will
 * be ignored. This means that invalid tags will also be removed.
 * @return {string} The filtered HTML string.
 */
function strip_tags(str, allowable_tags) {
    allowable_tags = [].concat(allowable_tags);
    var keep = '';
    allowable_tags.forEach(function(tag) {
        if (('' + tag).match(/^[a-z][a-z0-9]+$/i))
            keep += (keep.length ? '|' : '') + tag;
    } );
    return str.replace(new RegExp(']+>', 'ig'), '');
}

已经实施了额外的检查，以尽可能防止删除无效标签，方法是确保每个标签的开始都以潜在的标签名称开头；它不考虑属性中的大于号符号。评论将被保留，但可以使用类似的正则表达式删除。

var no_comments = strip_tags('This is not a comment. ').replace(//, '');

John Fiala

永久链接到评论# 2020年7月22日

嗨！

我不想打扰你，但看起来你的函数的最后一行不知何故被破坏了 - 那不是一个有效的正则表达式。你有没有可能修复它？

BanZai

# 2018年7月26日

嗨，伙计们！我目前遇到了一个与你这里提到的正则表达式/替换函数相关的 JavaScript 问题。
我想在一些 HTML 标签周围添加一些文本。

为此，我使用了这个函数

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

这里所有标签都被删除了。

但我想要保留<和>标签，并找到了这两个对我有用的独立函数

                               var regex = / <(?! \ s * \ /? \ s * p \ b) [^>] *> / gi; // deletes all HTML except


                               var regex = / <(?! br \ s * \ /?) [^>] +> / gi; // deletes all HTML except for

您知道如何将这两个条件组合到一个中吗？

Fran

# 2018年10月18日

这不仅删除了违规字符，还删除了其余文本。

Geoff Graham

永久链接到评论# 2018年10月19日

您正在处理的 HTML 是什么？

jass

# 2020年8月12日

为什么不使用 Element.textContent？

Shanti Tripathy

# 2020年9月4日

这正是我需要的……谢谢

赞赏

# 2021年4月30日

.replace(/(<([^> ]+)>)/ig, "")
在尖括号后添加了一个空格，以允许像这样：“< heey >”

Bilelz

# 2021年6月29日

另一个技巧：使用浏览器的删除标签功能

const fakeDiv = document.createElement("div");
fakeDiv.innerHTML = html;
document.getElementById("stripped").innerHTML = fakeDiv.textContent || fakeDiv.innerText || "";

Godswill

# 2021年8月9日

您好，先生。请我想知道我是否可以得到您的帮助。
我有一个前端提交，用户可以在其中分享他们的文章，但他们想要删除表单中的所有链接。
有没有办法只对非管理员用户提交的帖子执行此操作？
谢谢
我已经设置了前端帖子，它正常工作，除了我正在寻求帮助的方面。

评论

发表评论 取消回复

发表评论取消回复