如何从JavaScript中的字符串中剥离HTML(仅提取文本内容)

本文概述

1.创建一个临时DOM元素并检索文本
2.如果你使用的是jQuery
3.使用正则表达式

通常, 在服务器端, 你可以使用一系列PHP函数(例如strip_tags)并删除HTML和难看的格式。但是, 如果你无法使用服务器(或使用Node.js)来完成此任务, 则仍可以使用Javascript来完成。在本文中, 你将找到3种从Javascript字符串中剥离html标签的方法。
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(仅提取文本内容)】编码愉快！