有没有一种简单的方法可以在JavaScript中获取一个html字符串并去掉html？
如果你在浏览器中运行，那么最简单的方法就是让浏览器为你做。。。
function stripHtml(html)
{
let tmp = document.createElement("DIV");
tmp.innerHTML = html;
return tmp.textContent || tmp.innerText || "";
}
注意：正如人们在评论中所指出的，如果您不控制HTML的源代码（例如，不要在可能来自用户输入的任何内容上运行此代码），最好避免这种情况。对于这些场景，您仍然可以让浏览器为您完成工作-请参阅Saba关于使用现在广泛可用的DOMParser的回答。
另一个公认不如nickf或Shog9优雅的解决方案是从＜body＞标记开始递归遍历DOM并附加每个文本节点。
var bodyContent = document.getElementsByTagName('body')[0];
var result = appendTextNodes(bodyContent);
function appendTextNodes(element) {
var text = '';
// Loop through the childNodes of the passed in element
for (var i = 0, len = element.childNodes.length; i < len; i++) {
// Get a reference to the current child
var node = element.childNodes[i];
// Append the node's value if it's a text node
if (node.nodeType == 3) {
text += node.nodeValue;
}
// Recurse through the node's children, if there are any
if (node.childNodes.length > 0) {
appendTextNodes(node);
}
}
// Return the final result
return text;
}
将HTML转换为纯文本电子邮件，保持超链接（a href）完整
hypoxide发布的上述功能运行良好，但我所追求的是基本上转换在WebRichText编辑器（例如FCKEditor）中创建的HTML并清除所有HTML，但保留所有链接，因为我希望HTML和纯文本版本都能帮助创建STMP电子邮件的正确部分（HTML和纯文字）。
经过长时间的谷歌搜索，我和我的同事使用Javascript中的正则表达式引擎得出了这个结论：
str='this string has <i>html</i> code i want to <b>remove</b><br>Link Number 1 -><a href="http://www.bbc.co.uk">BBC</a> Link Number 1<br><p>Now back to normal text and stuff</p>
';
str=str.replace(/<br>/gi, "\n");
str=str.replace(/<p.*>/gi, "\n");
str=str.replace(/<a.*href="(.*?)".*>(.*?)<\/a>/gi, " $2 (Link->$1) ");
str=str.replace(/<(?:.|\s)*?>/g, "");
str变量的开头如下：
this string has <i>html</i> code i want to <b>remove</b><br>Link Number 1 -><a href="http://www.bbc.co.uk">BBC</a> Link Number 1<br><p>Now back to normal text and stuff</p>
然后在代码运行之后，它看起来像这样：-
this string has html code i want to remove
Link Number 1 -> BBC (Link->http://www.bbc.co.uk) Link Number 1
Now back to normal text and stuff
正如你所看到的，所有HTML都被删除了，链接也被保留了下来，超链接文本仍然完好无损。此外，我还将＜p＞和＜br＞标记替换为\n（换行符），以便保留某种视觉格式。
更改链接格式（例如，BBC（链接->http://www.bbc.co.uk)）只需编辑$2（Link->$1），其中$1是href URL/URI，$2是超链接文本。由于链接直接位于纯文本正文中，大多数SMTP邮件客户端都会转换这些链接，以便用户能够单击它们。
希望你觉得这很有用。
我认为最简单的方法就是像上面提到的那样使用正则表达式。虽然没有理由使用一堆。尝试：
stringWithHTML = stringWithHTML.replace(/<\/?[a-z][a-z0-9]*[^<>]*>/ig, "");
我对Jibberboy 2000的原始脚本做了一些修改希望对某人有用
str = '**ANY HTML CONTENT HERE**';
str=str.replace(/<\s*br\/*>/gi, "\n");
str=str.replace(/<\s*a.*href="(.*?)".*>(.*?)<\/a>/gi, " $2 (Link->$1) ");
str=str.replace(/<\s*\/*.+?>/ig, "\n");
str=str.replace(/ {2,}/gi, " ");
str=str.replace(/\n+\s*/gi, "\n\n");
我修改了Jibberboy2000的答案，加入了几种<BR/>标记格式，删除了<SCRIPT>和<STYLE>标记中的所有内容，通过删除多个换行符和空格来格式化生成的HTML，并将一些HTML编码代码转换为普通代码。经过一些测试后，您似乎可以将大部分完整网页转换为保留页面标题和内容的简单文本。
在简单示例中，
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<!--comment-->
<head>
<title>This is my title</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
body {margin-top: 15px;}
a { color: #D80C1F; font-weight:bold; text-decoration:none; }
</style>
</head>
<body>
<center>
This string has <i>html</i> code i want to <b>remove</b><br>
In this line <a href="http://www.bbc.co.uk">BBC</a> with link is mentioned.<br/>Now back to "normal text" and stuff using <html encoding>
</center>
</body>
</html>
变成
这是我的头衔此字符串包含我要删除的html代码在这一行中，BBC(http://www.bbc.co.uk)其中提到了链接。现在回到“普通文本”和使用
JavaScript函数和测试页面如下所示：
function convertHtmlToText() {
var inputText = document.getElementById("input").value;
var returnText = "" + inputText;
//-- remove BR tags and replace them with line break
returnText=returnText.replace(/<br>/gi, "\n");
returnText=returnText.replace(/<br\s\/>/gi, "\n");
returnText=returnText.replace(/<br\/>/gi, "\n");
//-- remove P and A tags but preserve what's inside of them
returnText=returnText.replace(/<p.*>/gi, "\n");
returnText=returnText.replace(/<a.*href="(.*?)".*>(.*?)<\/a>/gi, " $2 ($1)");
//-- remove all inside SCRIPT and STYLE tags
returnText=returnText.replace(/<script.*>[\w\W]{1,}(.*?)[\w\W]{1,}<\/script>/gi, "");
returnText=returnText.replace(/<style.*>[\w\W]{1,}(.*?)[\w\W]{1,}<\/style>/gi, "");
//-- remove all else
returnText=returnText.replace(/<(?:.|\s)*?>/g, "");
//-- get rid of more than 2 multiple line breaks:
returnText=returnText.replace(/(?:(?:\r\n|\r|\n)\s*){2,}/gim, "\n\n");
//-- get rid of more than 2 spaces:
returnText = returnText.replace(/ +(?= )/g,'');
//-- get rid of html-encoded characters:
returnText=returnText.replace(/ /gi," ");
returnText=returnText.replace(/&/gi,"&");
returnText=returnText.replace(/"/gi,'"');
returnText=returnText.replace(/</gi,'<');
returnText=returnText.replace(/>/gi,'>');
//-- return
document.getElementById("output").value = returnText;
}
它与此HTML一起使用：
<textarea id="input" style="width: 400px; height: 300px;"></textarea><br />
<button onclick="convertHtmlToText()">CONVERT</button><br />
<textarea id="output" style="width: 400px; height: 300px;"></textarea><br />
(function($){
$.html2text = function(html) {
if($('#scratch_pad').length === 0) {
$('<div id="lh_scratch"></div>').appendTo('body');
}
return $('#scratch_pad').html(html).text();
};
})(jQuery);
将其定义为jquery插件，并按如下方式使用：
$.html2text(htmlContent);
这是一个解决@MikeSamuel安全问题的版本：
function strip(html)
{
try {
var doc = document.implementation.createDocument('http://www.w3.org/1999/xhtml', 'html', null);
doc.documentElement.innerHTML = html;
return doc.documentElement.textContent||doc.documentElement.innerText;
} catch(e) {
return "";
}
}
注意，如果HTML标记不是有效的XML，它将返回一个空字符串（也就是，标记必须关闭，属性必须引用）。这并不理想，但确实避免了潜在的安全漏洞问题。
如果不需要有效的XML标记，可以尝试使用：
var doc = document.implementation.createHTMLDocument("");
但出于其他原因，这也不是一个完美的解决方案。
我自己创建了一个工作正则表达式：
str=str.replace(/(<\?[a-z]*(\s[^>]*)?\?(>|$)|<!\[[a-z]*\[|\]\]>|<!DOCTYPE[^>]*?(>|$)|<!--[\s\S]*?(-->|$)|<[a-z?!\/]([a-z0-9_:.])*(\s[^>]*)?(>|$))/gi, '');
作为jQuery方法的扩展，如果字符串可能不包含HTML（例如，如果您试图从表单字段中删除HTML）
jQuery(html).text();
如果没有HTML，将返回空字符串
Use:
jQuery('<p>' + html + '</p>').text();
相反
更新：正如评论中所指出的，在某些情况下，如果攻击者可能影响html的值，则此解决方案将执行html中包含的javascript，请使用不同的解决方案。
简单的2行jquery去掉html。
var content = "<p>checking the html source </p><p>
</p><p>with </p><p>all</p><p>the html </p><p>content</p>";
var text = $(content).text();//It gets you the plain text
console.log(text);//check the data in your console
cj("#text_area_id").val(text);//set your content to text area using text_area_id
对公认答案的改进。
function strip(html)
{
var tmp = document.implementation.createHTMLDocument("New").body;
tmp.innerHTML = html;
return tmp.textContent || tmp.innerText || "";
}
这样一来，像这样运行的东西不会造成任何伤害：
strip("<img onerror='alert(\"could run arbitrary JS here\")' src=bogus>")
Firefox、Chromium和Explorer 9+是安全的。歌剧院普雷斯托仍然很脆弱。字符串中提到的图像也不会在Chromium和Firefox中保存http请求。
我只需要去掉＜a＞标签，并用链接的文本替换它们。
这似乎很有效。
htmlContent= htmlContent.replace(/<a.*href="(.*?)">/g, '');
htmlContent= htmlContent.replace(/<\/a>/g, '');
在尝试了所有提到的答案后，如果不是所有答案都有边缘案例，也不能完全支持我的需求。
我开始探索php是如何做到这一点的，并在这里遇到了复制strip_tags方法的php.js库：http://phpjs.org/functions/strip_tags/
下面的代码允许您保留一些html标记，同时剥离所有其他标记
function strip_tags(input, allowed) {
allowed = (((allowed || '') + '')
.toLowerCase()
.match(/<[a-z][a-z0-9]*>/g) || [])
.join(''); // making sure the allowed arg is a string containing only tags in lowercase (<a><b><c>)
var tags = /<\/?([a-z][a-z0-9]*)\b[^>]*>/gi,
commentsAndPhpTags = /<!--[\s\S]*?-->|<\?(?:php)?[\s\S]*?\?>/gi;
return input.replace(commentsAndPhpTags, '')
.replace(tags, function($0, $1) {
return allowed.indexOf('<' + $1.toLowerCase() + '>') > -1 ? $0 : '';
});
}
function stripHTML(my_string){
var charArr = my_string.split(''),
resultArr = [],
htmlZone = 0,
quoteZone = 0;
for( x=0; x < charArr.length; x++ ){
switch( charArr[x] + htmlZone + quoteZone ){
case "<00" : htmlZone = 1;break;
case ">10" : htmlZone = 0;resultArr.push(' ');break;
case '"10' : quoteZone = 1;break;
case "'10" : quoteZone = 2;break;
case '"11' :
case "'12" : quoteZone = 0;break;
default : if(!htmlZone){ resultArr.push(charArr[x]); }
}
}
return resultArr.join('');
}
在新创建的dom元素中说明>内部属性和<img oneror=“javascript”>。
用法：
clean_string = stripHTML("string with <html> in it")
演示：
https://jsfiddle.net/gaby_de_wilde/pqayphzd/
做可怕事情的顶级答案演示：
https://jsfiddle.net/gaby_de_wilde/6f0jymL6/1/
还可以使用出色的htmlparser2纯JSHTML解析器。这里是一个工作演示：
var htmlparser = require('htmlparser2');
var body = '<p><div>This is </div>a <span>simple </span> <img src="test"></img>example.</p>';
var result = [];
var parser = new htmlparser.Parser({
ontext: function(text){
result.push(text);
}
}, {decodeEntities: true});
parser.write(body);
parser.end();
result.join('');
输出将是这是一个简单的示例。
请在此处查看实际操作：https://tonicdev.com/jfahrenkrug/extract-text-from-html
如果您使用类似webpack的工具打包web应用程序，则这在节点和浏览器中都有效。
大多数情况下，接受的答案都很好，但是在IE中，如果html字符串为空，则会得到“null”（而不是“”）。固定的：
function strip(html)
{
if (html == null) return "";
var tmp = document.createElement("DIV");
tmp.innerHTML = html;
return tmp.textContent || tmp.innerText || "";
}
如果你想保留链接和内容结构（h1、h2等），那么你应该检查TextVersionJS。你可以将它与任何HTML一起使用，尽管它是为了将HTML电子邮件转换为纯文本而创建的。
用法很简单。例如，在node.js中：
var createTextVersion = require("textversionjs");
var yourHtml = "<h1>Your HTML</h1><ul><li>goes</li><li>here.</li></ul>";
var textVersion = createTextVersion(yourHtml);
或者在浏览器中使用纯js：
<script src="textversion.js"></script>
<script>
var yourHtml = "<h1>Your HTML</h1><ul><li>goes</li><li>here.</li></ul>";
var textVersion = createTextVersion(yourHtml);
</script>
它也适用于require.js：
define(["textversionjs"], function(createTextVersion) {
var yourHtml = "<h1>Your HTML</h1><ul><li>goes</li><li>here.</li></ul>";
var textVersion = createTextVersion(yourHtml);
});
使用Jquery：
function stripTags() {
return $('<p></p>').html(textToEscape).text()
}
这应该可以在任何Javascript环境（包括NodeJS）上完成工作。
const text = `
<html lang="en">
<head>
<style type="text/css">*{color:red}</style>
<script>alert('hello')</script>
</head>
<body><b>This is some text</b><br/><body>
</html>`;
// Remove style tags and content
text.replace(/<style[^>]*>.*<\/style>/gm, '')
// Remove script tags and content
.replace(/<script[^>]*>.*<\/script>/gm, '')
// Remove all opening, closing and orphan HTML tags
.replace(/<[^>]+>/gm, '')
// Remove leading spaces and repeated CR/LF
.replace(/([\r\n]+ +)+/gm, '');
很多人已经回答了这个问题，但我认为分享我编写的函数可能会有用，该函数可以从字符串中删除HTML标记，但允许您包含一个不希望删除的标记数组。它很短，对我来说一直很好。
function removeTags(string, array){
return array ? string.split("<").filter(function(val){ return f(array, val); }).map(function(val){ return f(array, val); }).join("") : string.split("<").map(function(d){ return d.split(">").pop(); }).join("");
function f(array, value){
return array.map(function(d){ return value.includes(d + ">"); }).indexOf(true) != -1 ? "<" + value : value.split(">")[1];
}
}
var x = "<span><i>Hello</i> <b>world</b>!</span>";
console.log(removeTags(x)); // Hello world!
console.log(removeTags(x, ["span", "i"])); // <span><i>Hello</i> world!</span>
输入元素仅支持单行文本：
文本状态表示元素值的单行纯文本编辑控件。
function stripHtml(str) {
var tmp = document.createElement('input');
tmp.value = str;
return tmp.value;
}
更新：这是预期的
function stripHtml(str) {
// Remove some tags
str = str.replace(/<[^>]+>/gim, '');
// Remove BB code
str = str.replace(/\[(\w+)[^\]]*](.*?)\[\/\1]/g, '$2 ');
// Remove html and line breaks
const div = document.createElement('div');
div.innerHTML = str;
const input = document.createElement('input');
input.value = div.textContent || div.innerText || '';
return input.value;
}
我想分享一下Shog9批准答案的编辑版本。
正如Mike Samuel在评论中指出的那样，该函数可以执行内联javascript代码。但Shog9说“让浏览器为你做……”是对的
所以…这里是我的编辑版本，使用DOMParser：
function strip(html){
let doc = new DOMParser().parseFromString(html, 'text/html');
return doc.body.textContent || "";
}
这里是测试内联javascript的代码：
strip("<img onerror='alert(\"could run arbitrary JS here\")' src=bogus>")
此外，它不会在解析时请求资源（如图像）
strip("Just text <img src='https://assets.rbl.ms/4155638/980x.jpg'>")
function strip_html_tags(str)
{
if ((str===null) || (str===''))
return false;
else
str = str.toString();
return str.replace(/<[^>]*>/g, '');
}
var text = html.replace(/<\/?("[^"]*"|'[^']*'|[^>])*(>|$)/g, "");
这是一个正则表达式版本，对格式错误的HTML更具弹性，例如：
未闭合的标记
某些文本<img
标记属性内的“<”，“>”
某些文本<img alt=“x>y”>
换行符
一些<ahref=“http://google.com">
代码
var html = '<br>This <img alt="a>b" \r\n src="a_b.gif" />is > \nmy<>< > <a>"text"</a'
var text = html.replace(/<\/?("[^"]*"|'[^']*'|[^>])*(>|$)/g, "");
https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML
var div = document.getElementsByTagName('div');
for (var i=0; i<div.length; i++) {
div[i].insertAdjacentHTML('afterend', div[i].innerHTML);
document.body.removeChild(div[i]);
}
用jQuery剥离html的一种更安全的方法是，首先使用jQuery.parseHTML创建DOM，忽略任何脚本，然后让jQuery构建元素，然后仅检索文本。
function stripHtml(unsafe) {
return $($.parseHTML(unsafe)).text();
}
可以安全地从以下位置剥离html：
<img src="unknown.gif" onerror="console.log('running injections');">
以及其他漏洞。
nJoy！
方法1：
function cleanHTML(str){
str.replace(/<(?<=<)(.*?)(?=>)>/g, '<$1>');
}
function uncleanHTML(str){
str.replace(/<(?<=<)(.*?)(?=>)>/g, '<$1>');
}
方法2：
function cleanHTML(str){
str.replace(/</g, '<').replace(/>/g, '>');
}
function uncleanHTML(str){
str.replace(/</g, '<').replace(/>/g, '>');
}
此外，不要忘记，如果用户碰巧发布了一条数学评论（例如：1<2），您不想删除整个评论。浏览器（仅测试了chrome）不将unicode作为html标记运行。如果将所有<替换为<；字符串中的每一个文件，unicode都将显示<为文本，而不运行任何html。我推荐方法2。jquery也能很好地工作$（'#element'）.text（）；
要获得更简单的解决方案，请尝试此=>https://css-tricks.com/snippets/javascript/strip-html-tags-in-javascript/
var StrippedString = OriginalString.replace(/(<([^>]+)>)/ig,"");
来自CSS技巧：
https://css-tricks.com/snippets/javascript/strip-html-tags-in-javascript/
常量原始字符串=`＜div＞<p>嘿，这是什么东西</p></div>`;conststripedString=originalString.replace（/（<（[^>]+）>）/gi，“”）；console.log（strippedString）；
var STR='<Your HTML STRING>''
var HTMLParsedText="";
var resultSet = STR.split('>')
var resultSetLength =resultSet.length
var counter=0
while(resultSetLength>0)
{
if(resultSet[counter].indexOf('<')>0)
{
var value = resultSet[counter];
value=value.substring(0, resultSet[counter].indexOf('<'))
if (resultSet[counter].indexOf('&')>=0 && resultSet[counter].indexOf(';')>=0) {
value=value.replace(value.substring(resultSet[counter].indexOf('&'), resultSet[counter].indexOf(';')+1),'')
}
}
if (value)
{
value = value.trim();
if(HTMLParsedText === "")
{
HTMLParsedText = value;
}
else
{
if (value) {
HTMLParsedText = HTMLParsedText + "\n" + value;
}
}
value='';
}
counter= counter+1;
resultSetLength=resultSetLength-1;
}
console.log(HTMLParsedText);
如果您不想为此创建DOM（可能您不在浏览器上下文中），可以使用striptags npm包。
import striptags from 'striptags'; //ES6 <-- pick one
const striptags = require('striptags'); //ES5 <-- pick one
striptags('<p>An HTML string</p>');
这个包非常适合剥离HTML：https://www.npmjs.com/package/string-strip-html
它可以在浏览器和服务器（例如Node.js）上工作。
const getTextFromHtml = (t) =>
t
?.split('>')
?.map((i) => i.split('<')[0])
.filter((i) => !i.includes('=') && i.trim())
.join('');
const test = '<p>This <strong>one</strong> <em>time</em>,</p><br /><blockquote>I went to</blockquote><ul><li>band <a href="https://workingclasshistory.com" rel="noopener noreferrer" target="_blank">camp</a>…</li></ul><p>I edited this as a reviewer just to double check</p>'
getTextFromHtml(test)
// 'This onetime,I went toband camp…I edited this as a reviewer just to double check'
const strip=(text) =>{
return (new DOMParser()?.parseFromString(text,"text/html"))
?.body?.textContent
}
const value=document.getElementById("idOfEl").value
const cleanText=strip(value)
正如其他人所建议的，我建议尽可能使用DOMParser。
然而，如果您恰好在Node/JS Lambda内部工作，或者DOMParser不可用，我会使用下面的正则表达式来匹配前面的回答/评论中提到的大多数场景。它与$gt；不匹配；和$lt；正如其他一些人可能担心的那样，但应该捕捉到几乎任何其他场景。
const dangerousText = '?';
const htmlTagRegex = /<\/?([a-zA-Z]\s?)*?([a-zA-Z]+?=\s?".*")*?([\s/]*?)>/gi;
const sanitizedText = dangerousText.replace(htmlTagRegex, '');
这可能很容易简化，但它应该适用于大多数情况。希望这对某人有所帮助。
const-htmlParser=new DOMParser（）.parseFromString（“<h6>用户<p>名称</p></h6>”，'text/html'）；const textString=htmlParser.body.textContent；console.log（textString）
您可以使用以下正则表达式去掉所有html标记：/<（.|\n）*？>/克
例子：
let str = "<font class=\"ClsName\">int[0]</font><font class=\"StrLit\">()</font>";
console.log(str.replace(/<(.|\n)*?>/g, ''));
输出：
int[0]()
一个非常好的库是净化html，它是一个纯JavaScript函数，可以在任何环境中使用。
我的案例是React Native，我需要从给定文本中删除所有HTML标记。所以我创建了这个包装函数：
import sanitizer from 'sanitize-html';
const textSanitizer = (textWithHTML: string): string =>
sanitizer(textWithHTML, {
allowedTags: [],
});
export default textSanitizer;
现在，通过使用textSanitizer，我可以获得纯文本内容。
