Bry*_*yan 603 html javascript string
有一种简单的方法可以在JavaScript中获取一串html并删除html吗？
Sho*_*og9 716
如果您在浏览器中运行,那么最简单的方法就是让浏览器为您执行此操作...
function stripHtml(html)
{
var tmp = document.createElement("DIV");
tmp.innerHTML = html;
return tmp.textContent || tmp.innerText || "";
}
注意:正如大家在评论中指出的那样,如果你不控制HTML的来源(例如,不要在任何可能来自用户输入的内容上运行),最好避免这种情况.对于这些场景,您仍然可以让浏览器为您完成工作 - 请参阅Saba关于使用现在广泛使用的DOMParser的答案.
nic*_*ckf 544
myString.replace(/<[^>]*>?/gm, '');
Mar*_*ark 239
最简单的方法:
jQuery(html).text();
它从一串html中检索所有文本.
Sab*_*baz 93
我想分享一下Shog9批准的答案的编辑版本.
正如Mike Samuel指出的那样,该函数可以执行内联javascript代码.
但Shog9说"让浏览器为你做这件事......"是对的.
所以...这里是我编辑的版本,使用DOMParser:
function strip(html){
var 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'>")
use*_*305 53
作为jQuery方法的扩展,如果您的字符串可能不是contian HTML(例如,如果您尝试从表单字段中删除HTML)
jQuery(html).text();
如果没有html,将返回一个空字符串
使用:
jQuery('<p>' + html + '</p>').text();
代替.
更新:
正如评论中指出的那样,在某些情况下,html如果html攻击者可能会影响该值,则此解决方案将执行其中包含的javascript ,使用不同的解决方案.
小智 38
由hypoxide发布的上述函数工作正常,但我之前基本上转换了在Web RichText编辑器(例如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 (Link->http://www.bbc.co.uk)),只需编辑$2 (Link->$1),其中$1href URL/URI和$2超链接文本.通过直接在纯文本正文中的链接,大多数SMTP邮件客户端都会转换这些链接,以便用户可以单击它们.
希望您觉得这个有帮助.
Jan*_*hou 32
对已接受答案的改进.
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+都是安全的.Opera Presto仍然很脆弱.此外,字符串中提到的图像不会在Chromium和Firefox中下载,也不会保存http请求.
Kar*_*l.S 20
这应该在任何Javascript环境(包括NodeJS)上完成.
__CODE__
Ele*_*wen 15
我改变了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 />
heg*_*mon 13
var text = html.replace(/<\/?("[^"]*"|'[^']*'|[^>])*(>|$)/g, "");
这是一个正则表达式版本,它对格式错误的HTML更具弹性,例如:
未封闭的标签
Some text <img
标签属性中包含"<",">"
Some text <img alt="x > y">
换行
Some <a
href="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, "");
const htmlParser= new DOMParser().parseFromString("<h6>User<p>name</p></h6>" , 'text/html');
const textString= htmlParser.body.textContent;
console.log(textString)另一个公认的不如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;
}
如果你想保留链接和内容的结构(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);
});
来自 CSS 技巧：
https://css-tricks.com/snippets/javascript/strip-html-tags-in-javascript/
const originalString = `
<div>
<p>Hey that's <span>somthing</span></p>
</div>
`;
const strippedString = originalString.replace(/(<([^>]+)>)/gi, "");
console.log(strippedString);也可以使用神奇的htmlparser2纯 JS HTML 解析器。这是一个工作演示：
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('');
输出将是This is a simple example.
在这里查看它的实际效果： https: //tonicdev.com/jfahrenkrug/extract-text-from-html
如果您使用 webpack 等工具打包 Web 应用程序，那么这在节点和浏览器中都适用。
很多人已经回答了这个问题，但我认为分享我编写的函数可能会很有用，该函数从字符串中剥离 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>
为了更简单的解决方案，试试这个 => https://css-tricks.com/snippets/javascript/strip-html-tags-in-javascript/
var StrippedString = OriginalString.replace(/(<([^>]+)>)/ig,"");