从文本JavaScript中删除HTML


Answers:


760

如果您在浏览器中运行,那么最简单的方法就是让浏览器为您完成...

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

注意:正如人们在评论中所指出的那样,如果您不控制HTML的源代码(例如,请勿在可能来自用户输入的任何内容上运行此代码),则最好避免这种情况。对于这些情况,您仍然可以让浏览器为您完成工作- 请参阅Saba关于使用现在广泛使用的DOMParser的答案


40
只需记住,这种方法是相当不一致的,并且将无法在某些浏览器中去除某些字符。例如,在Prototype.js中,我们使用这种方法来提高性能,但是可以解决一些缺陷-github.com/kangax/prototype/blob/…–
kangax

11
请记住,您的空白将被弄乱。我曾经使用这种方法,但由于某些产品代码包含双精度空格而出现问题,在我从DIV取回innerText之后,最终却变成了单个空格。然后,产品代码在以后的应用程序中不匹配。
Magnus Smith,

11
@Magnus Smith:是的,如果需要考虑空格-或者实际上,如果您需要不直接涉及您正在使用的特定HTML DOM的文本,那么最好使用另一个这里给出的解决方案。此方法的主要优点是:1)琐碎,2)将以与运行浏览器相同的方式可靠地处理标签,空格,实体,注释等。这对于Web客户端代码通常很有用,但不一定适合与规则不同的其他系统进行交互。
Shog9

220
请勿将其用于不受信任来源的HTML。要了解原因,请尝试运行strip("<img onerror='alert(\"could run arbitrary JS here\")' src=bogus>")
Mike Samuel

24
如果html包含图像(img标签),则浏览器将请求图像。这不好。
douyw

589
myString.replace(/<[^>]*>?/gm, '');

4
<img src=http://www.google.com.kh/images/srpr/nav_logo27.png onload="alert(42)" 如果要通过via注入document.write或与包含>在注入via之前的字符串串接,则无法使用innerHTML
Mike Samuel 2010年

1
@PerishableDave,我同意>将保留在第二个位置。不过,这不是注射危险。之所以会发生危险,是因为<前者遗留在第二个开始时,这导致HTML解析器处于数据状态以外的上下文中。请注意,从到的数据状态没有过渡>
Mike Samuel

73
@MikeSamuel我们确定这个答案了吗?朴素的用户在这里准备复制粘贴。
Ziggy

1
我相信,如果给定类似“ <button onClick="dostuff('>');"></button>假设HTML正确书写”之类的东西,这也将完全引起混淆,您仍然需要考虑到,属性中引用文本中的某个地方可能会出现大于号。另外,您<script>至少要删除标记内的所有文本。
乔纳森(Jonathon)

15
@AntonioMax,我已经回答了这个问题令人生厌,但对你的问题的实质,因为安全关键代码不应该复制粘贴及。 您应该下载一个库,并对其进行更新和修补,以确保免受最近发现的漏洞和浏览器更改的影响。
Mike Samuel

249

最简单的方法:

jQuery(html).text();

这将从html字符串中检索所有文本。


111
我们总是将jQuery用于项目,因为我们的项目总是有很多Javascript。因此,我们没有添加大量的东西,而是利用了现有的API代码...
2012年

32
您使用它,但OP可能没有。问题是关于Javascript NOT JQuery。
Dementic'3

105
对于需要与OP一样做同样的事情(像我一样)并且不介意使用jQuery(像我一样)的人来说,这仍然是一个有用的答案,更不用说,如果他们考虑使用OP,这对OP可能是有用的。 jQuery的。该站点的重点是分享知识。请记住,在没有充分理由的情况下,通过敲击有用的答案可能会产生寒蝉效应。
2012年

27
令人震惊的是,@ Dementic,我发现具有多个答案的线程是最有用的,因为第二个答案通常可以满足我的确切需求,而第一个答案通常可以满足一般情况。
埃里克·戈德堡

36
如果您未将部分字符串包装在html标记中,则将无法使用。例如,“ <b>错误:</ b>请输入有效的电子邮件”将仅返回“错误:”
Aamir Afridi

127

我想分享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'>")

3
值得补充的是,该解决方案仅在浏览器中有效。
kris_IV '18

1
这不是剥离标签,而是更像PHP htmlspecialchars()。仍然对我有用。
丹特吉

请注意,这也会从文本开头删除空格。
Raine Revere

还要注意,这确实适用于Web Workers
Chris Seufert

这似乎比@ Shog9的答案快得多
Shmuel Kamensky

55

作为jQuery方法的扩展,如果您的字符串可能不包含HTML(例如,如果您尝试从表单字段中删除HTML)

jQuery(html).text();`

如果没有HTML,将返回一个空字符串

采用:

jQuery('<p>' + html + '</p>').text();

代替。

更新: 如评论中所指出,在某些情况下,html如果的值html可能受到攻击者的影响,则此解决方案将执行其中包含的javascript ,请使用其他解决方案。


12
$("<p>").html(html).text();
Dimitar Dimitrov 2014年

4
这仍然可能执行危险的代码jQuery('<span>Text :) <img src="a" onerror="alert(1)"></span>').text()
Simon

试试jQuery(“ aa&#X003c; script> alert(1)&#X003c; / script> a”)。text();
Grzegorz Kaczan

41

为纯文本电子邮件转换HTML,使超链接(a href)保持完整

由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均已删除,并且链接已被保留,超链接文本仍然完整无缺。另外,我还用(newline char)替换了<p>and <br>标签,\n以便保留某种视觉格式。

要更改链接格式(例如BBC (Link->http://www.bbc.co.uk)),只需编辑$2 (Link->$1),其中$1hrefURL / URI $2是,超链接文本是。通过直接在纯文本主体中的链接,大多数SMTP邮件客户端都会将其转换,因此用户可以单击它们。

希望您觉得这个有帮助。


它不处理“&nbsp;”
Rose Nettoyeur

33

对已接受答案的改进。

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请求。


这是其中的一些方法,但是从此开始并不安全<script><script>alert();
Arth 2016年

1
在Linux上的Chromium / Opera / Firefox中,该命令不会在此处运行任何脚本,所以为什么它不安全?

抱歉,我必须经过误测,我可能忘记了再次在jsFiddle上单击运行。
Arth

我认为“新”论点是多余的吗?
乔恩·施耐德

根据规格,如今它是可选的,但并非总是如此。

23

这应该可以在任何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, '');

@pstanton您能举一个可行的例子吗?
Karl.S

3
<html><style..>* {font-family:comic-sans;}</style>Some Text</html>
pstanton

@pstanton我已修复代码并添加了注释,对于较晚的答复,我们深表歉意。
Karl.S,

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 &quot;normal text&quot; and stuff using &lt;html encoding&gt;                 
    </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(/&nbsp;/gi," ");
    returnText=returnText.replace(/&amp;/gi,"&");
    returnText=returnText.replace(/&quot;/gi,'"');
    returnText=returnText.replace(/&lt;/gi,'<');
    returnText=returnText.replace(/&gt;/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 />

1
我喜欢这个解决方案,因为它可以处理html特殊字符...但是仍然不够用...对我来说最好的答案就是处理所有这些字符。(这可能是jquery所做的)。
Daniel Gerson 2012年

2
我认为/<p.*>/gi应该是/<p.*?>/gi
cbron 2015年

请注意,要删除所有<br>标签,您可以改用一个好的正则表达式:/<br\s*\/?>/那样,您只需一个替换项即可代替3。另外,在我看来,除了对实体进行解码之外,您还可以有一个正则表达式,如下所示:/<[a-z].*?\/?>/
Alexis Wilke

不错的脚本。但是表内容呢?任何想法如何显示
Hristo Enev

@DanielGerson,对html进行编码非常真实,快速,但是最好的方法似乎是在使用he库
KyleMit 19'Aug

15
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, "");

7

另一个被认为不如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;
}

3
ike。如果您要根据字符串创建DOM树,则只需使用shog的方法即可!
尼克

是的,我的解决方案是使用大锤,在这种情况下,常规锤子更合适:-)。我同意您和Shog9的解决方案更好,并且基本上在回答中也这么说。我也没有在响应中反映出html已经包含在字符串中,因此对于原始问题而言,我的答案基本上毫无用处。:-(
布莱恩

1
公平地说,这很有价值-如果您绝对必须保留/ all /文本,那么在捕获换行符,制表符,回车符等方面至少有不错的一面。然后,nickf的解决方案也应该这样做,而且速度更快...嗯。
Shog9,2009年

7

如果要保留链接和内容的结构(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);
});

4

在尝试了所有提到的所有答案之后,即使不是全部,它们都具有优势,并且不能完全支持我的需求。

我开始探索php的工作方式,并发现了php.js库,该库在此处复制了strip_tags方法:http ://phpjs.org/functions/strip_tags/


这是一个简洁的功能,并且有据可查。但是,当allowed == ''我认为OP要求的时候,它可以做得更快,这几乎是拜伦在下面回答的(拜伦[^>]错了。)
Alexis Wilke 2016年

1
如果您使用allowed参数,则很容易受到XSS的攻击: stripTags('<p onclick="alert(1)">mytext</p>', '<p>')返回<p onclick="alert(1)">mytext</p>
Chris Cinelli

4
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('');
}

解释>内部属性和<img onerror="javascript">新创建的dom元素。

用法:

clean_string = stripHTML("string with <html> in it")

演示:

https://jsfiddle.net/gaby_de_wilde/pqayphzd/

顶级答案演示做了可怕的事情:

https://jsfiddle.net/gaby_de_wilde/6f0jymL6/1/


您还需要在属性值内处理转义的引号(例如string with <a malicious="attribute \">this text should be removed, but is not">example</a>)。
Logan Pickup

4

很多人已经回答了这个问题,但是我认为共享我编写的从字符串中剥离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>

3

我认为最简单的方法就是像上面提到的那样使用正则表达式。尽管没有理由使用它们。尝试:

stringWithHTML = stringWithHTML.replace(/<\/?[a-z][a-z0-9]*[^<>]*>/ig, "");

11
如果您关心安全性,请不要这样做。如果用户输入的是以下内容:“ <scr <script> ipt> alert(42); </ scr </ script> ipt>”,则剥离后的版本将是:'<script> alert(42); </ script >”。因此,这是一个XSS漏洞。
molnarg 2013年

您应该更改[^<>]with,[^>]因为有效标签不能包含<字符,然后XSS漏洞就会消失。
Alexis Wilke

3

我对原始的Jibberboy2000脚本进行了一些修改,希望它对某人有用

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");

3

这是一个解决@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("");

但是由于其他原因,这也不是一个完美的解决方案。


如果文本来自用户输入(textarea或contenteditable小部件...),则在许多情况下都将失败
Alexis Wilke

3

您可以使用iframe沙盒属性安全地删除html标签。

这里的想法是,我们不尝试对字符串进行正则表达式,而是通过将文本注入到DOM元素中,然后查询该元素的textContent/ innerText属性来利用浏览器的本机解析器。

最适合插入文本的元素是沙盒iframe,这样我们就可以防止执行任意代码(也称为XSS)。

这种方法的缺点是仅在浏览器中有效。

这是我想出的(未经测试):

const stripHtmlTags = (() => {
  const sandbox = document.createElement("iframe");
  sandbox.sandbox = "allow-same-origin"; // <--- This is the key
  sandbox.style.setProperty("display", "none", "important");

  // Inject the sanbox in the current document
  document.body.appendChild(sandbox);

  // Get the sandbox's context
  const sanboxContext = sandbox.contentWindow.document;

  return (untrustedString) => {
    if (typeof untrustedString !== "string") return ""; 

    // Write the untrusted string in the iframe's body
    sanboxContext.open();
    sanboxContext.write(untrustedString);
    sanboxContext.close();

    // Get the string without html
    return sanboxContext.body.textContent || sanboxContext.body.innerText || "";
  };
})();

用法(演示):

console.log(stripHtmlTags(`<img onerror='alert("could run arbitrary JS here")' src='bogus'>XSS injection :)`));
console.log(stripHtmlTags(`<script>alert("awdawd");</` + `script>Script tag injection :)`));
console.log(stripHtmlTags(`<strong>I am bold text</strong>`));
console.log(stripHtmlTags(`<html>I'm a HTML tag</html>`));
console.log(stripHtmlTags(`<body>I'm a body tag</body>`));
console.log(stripHtmlTags(`<head>I'm a head tag</head>`));
console.log(stripHtmlTags(null));

基于Web的环境的绝佳解决方案!从ECMAScript 2015开始,您可能不应该使用IIFE,因为块范围内的变量已经使用letand const运算符正确地确定了块的范围。另外,使用您的解决方案,我iframes在文档中得到了很多未使用的参考。考虑document.body.removeChild(sandbox)为将来的基于复制粘贴的读者在代码中添加。
阿敏·奈里

2

使用jQuery,您可以使用来简单地检索它

$('#elementID').text()

2

下面的代码允许您保留一些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 : '';
      });
}

1
您应引用源(phpjs)。如果使用allowed参数,则很容易受到XSS的攻击: stripTags('<p onclick="alert(1)">mytext</p>', '<p>')返回<p onclick="alert(1)">mytext</p>
Chris Cinelli

2

也可以使用出色的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应用程序,则此方法在节点和浏览器中均有效。


2

我只需要剥离<a>标签,然后将其替换为链接的文本即可。

这看起来很棒。

htmlContent= htmlContent.replace(/<a.*href="(.*?)">/g, '');
htmlContent= htmlContent.replace(/<\/a>/g, '');

这仅适用于标签,并且需要进行调整以使其具有广泛的功能。
m3nda

是的,加上锚定标记可能还具有许多其他属性,例如title="..."
Alexis Wilke


1

我自己创建了一个工作正则表达式:

str=str.replace(/(<\?[a-z]*(\s[^>]*)?\?(>|$)|<!\[[a-z]*\[|\]\]>|<!DOCTYPE[^>]*?(>|$)|<!--[\s\S]*?(-->|$)|<[a-z?!\/]([a-z0-9_:.])*(\s[^>]*)?(>|$))/gi, ''); 

1

简单的2行jquery剥离html。

 var content = "<p>checking the html source&nbsp;</p><p>&nbsp;
  </p><p>with&nbsp;</p><p>all</p><p>the html&nbsp;</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

1

可接受的答案在大多数情况下都可以正常工作,但是在IE中,如果html字符串是null您得到的"null"(而不是“”)。固定:

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

1

使用jQuery:

function stripTags() {
    return $('<p></p>').html(textToEscape).text()
}

1

input元素仅支持一行文本

文本状态表示元素值的单行纯文本编辑控件。

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;
}

无效,请在发布答案时始终提及您使用的浏览器。这是不准确的,并且在Chrome 61中不起作用。标记只是呈现为字符串。
vdegenne

0
    (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);

可以说这来自用户输入。它可以用来将脚本或宏添加到您的页面
Oluwatumbi
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.