本文概述
- 1.创建一个临时DOM元素并检索文本
- 2.如果你使用的是jQuery
- 3.使用正则表达式
1.创建一个临时DOM元素并检索文本这是使用Javascript从字符串中剥离HTML的首选(推荐)方法。临时div元素的内容将是要剥离的Providen HTML字符串, 然后从div元素返回innerText属性:
/** * Returns the text from a HTML string * * @param {html} String The html string */function stripHtml(html){// Create a new div elementvar temporalDivElement = document.createElement("div");
// Set the HTML content with the providentemporalDivElement.innerHTML = html;
// Retrieve the text property of the element (cross-browser support)return temporalDivElement.textContent || temporalDivElement.innerText || "";
}var htmlString= "<
div>
<
h1>
Hello World<
/h1>
\n<
p>
It's me, Mario<
/p>
<
/div>
";
//Hello World//It's me, Marioconsole.log(stripHtml(htmlString));
唯一的问题(和优点)是浏览器将把Providen字符串当作HTML来处理, 这意味着, 如果HTML字符串包含浏览器的某种类型的可解释Javascript, 则它将被执行:
// This won't do anything but retrieve the textstripHtml("<
script>
alert(\"Hello\");
<
/script>
")// But this ...stripHtml("<
img onerror='alert(\"Oh Oh this is not good, i could do something evil with this javascript\")' src='http://www.srcmini.com/inexistent-image-source'>
")
因此, 仅当你信任HTML字符串的来源时, 才应使用此选项。
2.如果你使用的是jQuery如果你使用jQuery, 则可以从第一步开始简化代码。以下代码与第一步中的代码相同(警告也适用):
var htmlString= "<
div>
\n <
h1>
Hello World<
/h1>
\n <
p>
This is the text that we should get.<
/p>
\n <
p>
Our Code World &
#169;
2017<
/p>
\n <
/div>
";
var stripedHtml = $("<
div>
").html(htmlString).text();
// Hello World// This is the text that we should get.// Our Code World ? 2017console.log(stripedHtml);
3.使用正则表达式如果你在没有文档或createElement方法的节点环境中工作, 则可以使用正则表达式替换字符串中的所有HTML标记:
var htmlString= "<
div>
<
h1>
Hello World<
/h1>
\n<
p>
It's me, Mario<
/p>
<
/div>
";
var stripedHtml = htmlString.replace(/<
[^>
]+>
/g, '');
//Hello World//It's me, Marioconsole.log(stripedHtml);
此方法将完美地工作, 但是只会删除小于和大于符号(< 和> ), 这意味着不会从字符串中删除html实体, 如以下示例所示:
var htmlString= "<
div>
\n <
h1>
Hello World<
/h1>
\n <
p>
This is the text that we should get.<
/p>
\n <
p>
Our Code World &
#169;
2017<
/p>
\n <
/div>
";
var stripedHtml = htmlString.replace(/<
[^>
]+>
/g, '');
// Hello World// This is the text that we should get.// Our Code World &
#169;
2017console.log(stripedHtml);
?实体应翻译为版权符号, 但仍作为html实体存在。如果将其与第一种方法进行比较, 显然这是一个缺点, 但是请不要担心不会丢失所有内容(尚未)。你可以使用Javascript将htmlentities解码为可读的字符(阅读本文以了解如何实现)。以下示例将使用前面提到的replace指令剥离所有html, 并使用he库将htmlentity转换为人类可读的字符:
var htmlString= "<
div>
\n <
h1>
Hello World<
/h1>
\n <
p>
This is the text that we should get.<
/p>
\n <
p>
Our Code World &
#169;
2017<
/p>
\n <
/div>
";
var stripedHtml = htmlString.replace(/<
[^>
]+>
/g, '');
var decodedStripedHtml = he.decode(stripedHtml);
// Hello World// This is the text that we should get.// Our Code World &
#169;
2017console.log(stripedHtml);
// Hello World// This is the text that we should get.// Our Code World ? 2017console.log(decodedStripedHtml);
如你所见, 使用he库, 我们将剩余的html实体转换为可读的值。请注意, 你不必使用he库, 因为如果你阅读本文, 则可以创建自己的解码htmlentities函数。
【如何从JavaScript中的字符串中剥离HTML(仅提取文本内容)】编码愉快!
推荐阅读
- Cocos2d-x《雷电大战》-双层地图无限滚动
- 如何仅使用JavaScript获取客户端IP地址
- 如何根据文件的文件扩展名设置ACE编辑器模式
- 在Phaser.js中为游戏实现免费的触摸操纵杆
- 如何使用JavaScript解码图像中的QR码
- JavaScript语言中的语音识别API入门
- 如何使用JavaScript在浏览器中轻松创建寻字游戏(字母汤)
- 如何在Windows中使用命令提示符使用PhantomJS
- 如何在JavaScript中检查对象是否具有正确的属性