使用 JavaScript 从 HTML 字符串中提取文本答案

【问题标题】：Extract the text out of HTML string using JavaScript使用 JavaScript 从 HTML 字符串中提取文本
【发布时间】：2015-05-08 02:07:08
【问题描述】：

我正在尝试使用 JS 函数获取 HTML 字符串的内部文本（字符串作为参数传递）。代码如下：

function extractContent(value) {
  var content_holder = "";

  for (var i = 0; i < value.length; i++) {
    if (value.charAt(i) === '>') {
      continue;
      while (value.charAt(i) != '<') {
        content_holder += value.charAt(i);
      }
    }

  }
  console.log(content_holder);
}

extractContent("<p>Hello</p><a href='http://w3c.org'>W3C</a>");

问题是console(*content_holder* stays empty) 上没有打印任何内容。我认为问题是由=== 运算符引起的。

【问题讨论】：

由于continue 指令，您的while 循环永远不会到达。
尝试使用“调试器”跟踪您的代码——您这样做了吗？
JS: Extract text from a string without jQuery的可能重复
也类似：stackoverflow.com/questions/10585029/…
这能回答你的问题吗？ Get the pure text without HTML element by javascript?

标签： javascript html string text extract

【解决方案1】：

创建一个元素，将 HTML 存储在其中，并获取它的 textContent:

function extractContent(s) {
  var span = document.createElement('span');
  span.innerHTML = s;
  return span.textContent || span.innerText;
};
    
alert(extractContent("<p>Hello</p><a href='http://w3c.org'>W3C</a>"));

这是一个允许您在节点之间有空格的版本，尽管您可能只希望块级元素使用：

function extractContent(s, space) {
  var span= document.createElement('span');
  span.innerHTML= s;
  if(space) {
    var children= span.querySelectorAll('*');
    for(var i = 0 ; i < children.length ; i++) {
      if(children[i].textContent)
        children[i].textContent+= ' ';
      else
        children[i].innerText+= ' ';
    }
  }
  return [span.textContent || span.innerText].toString().replace(/ +/g,' ');
};
    
console.log(extractContent("<p>Hello</p><a href='http://w3c.org'>W3C</a>.  Nice to <em>see</em><strong><em>you!</em></strong>"));

console.log(extractContent("<p>Hello</p><a href='http://w3c.org'>W3C</a>.  Nice to <em>see</em><strong><em>you!</em></strong>",true));

【讨论】：

输出 HelloW3C - 真的是 OP 想要的吗？不是Hello W3C？
不，不需要空格 :) 抱歉没有提及！
添加了可以在节点之间添加空格的版本。
delete span 一事无成。
@torazaburo，谢谢，我不确定。已编辑。

【解决方案2】：

一行（更准确地说，一个语句）版本：

function extractContent(html) {

    return new DOMParser().parseFromString(html, "text/html") . 
        documentElement . textContent;

}

【讨论】：

不错的答案 +1，但你的答案和Rick Hitchcock 答案有什么区别
@shariqueansari, DOMParser 是“实验性技术”，但可能会添加到规范中。它的 HTML 支持在 IE10+ 中工作。我原来的答案在 IE9+ 中有效，但我现在已经更新它以支持 IE8。
DOMParser 现在得到了广泛的支持，请参阅caniuse.com/#search=domparser
希望这可以在 nodejs 上工作，但它没有。最终使用npmjs.com/package/html2plaintext
我们可以使用这种方法来提取一些内容，如：document.getElementById？

【解决方案3】：

textContext 是一种非常好的技术，可以达到预期的效果，但有时我们不想加载 DOM。如此简单的解决方法将遵循正则表达式：

let htmlString = "<p>Hello</p><a href='http://w3c.org'>W3C</a>"
let plainText = htmlString.replace(/<[^>]+>/g, '');

【讨论】：

我知道这是一个非常古老的评论，但你能解释一下表达式 /]+>/g 的含义吗？我无法理解每个字符的含义。
@Kelly 您所指的符号是一个正则表达式。它有点像用于解析文本的小程序语言。您可以通过以下链接了解有关每个符号的更多信息：developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/…
它本质上说要查找并删除每个 在它和 >之间有不是 > 的东西>.
最有帮助的正则表达式，编码人员最好的工具/迷你语言之一。
针对不同情况的不同技术，这对我来说是正确的方法，Telegram 的机器人开发不需要 innerHTML 或 Web 开发所需的东西。

【解决方案4】：

使用这个正则表达式来删除 html 标签并只将内部文本存储在 html 中

它显示 HelloW3c 只检查它

var content_holder = value.replace(/<(?:.|\n)*?>/gm, '');

【讨论】：

请给我一个理由好吗？
stackoverflow.com/questions/1732348/…
如果你打算使用正则表达式，那么更简单的版本是/<[\s\S]*?>/，或者/<[^]*?>/。你的m 标志什么也没做；它与^ 和$ 的行为有关。

【解决方案5】：

试试这个：-

<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
function extractContent(value){
        var div = document.createElement('div')
        div.innerHTML=value;
        var text= div.textContent;            
        return text;
}
window.onload=function()
{
   alert(extractContent("<p>Hello</p><a href='http://w3c.org'>W3C</a>"));
};
</script>
</body>
</html>

【讨论】：

你测试过这个吗？它未能按应有的方式提取“W3C”。
请尝试使用字符串Hello, BuggyWorld的解决方案。

【解决方案6】：

您可以暂时将其写入位于页面外的块级元素中......类似这样的事情：

HTML：

<div id="tmp" style="position:absolute;top:-400px;left:-400px;">
</div>

JavaScript：

<script type="text/javascript">
function extractContent(value){
        var div=document.getElementById('tmp');
        div.innerHTML=value;
        console.log(div.children[0].innerHTML);//console out p
}

extractContent("<p>Hello</p><a href='http://w3c.org'>W3C</a>");
</script>

【讨论】：

正确的方法，但您不需要 DOM 中的元素来执行此操作。只需使用 var div = document.createElement('div') 创建一个元素，然后从那里继续。
此外，嵌套 HTML 元素（例如 HelloBob<a>...</a>）也会失败。它将保留p 元素内的标记。

【解决方案7】：

你需要数组来保存值

  function extractContent(value) {
var content_holder = new Array();

for(var i=0;i<value.length;i++) {
    if(value.charAt(i) === '>') {
        continue;
        while(value.charAt(i) != '<') {
            content_holder.push(value.charAt(i));
            console.log(content_holder[i]);
        }
    }
}
}extractContent("<p>Hello</p><a href='http://w3c.org'>W3C</a>");

【讨论】：

您不需要数组，如果您希望结果是一个字符串，但拥有一个数组将允许用户访问每个结果/值。
您还没有修复 OP 代码中的基本逻辑错误。你测试过这个吗？
我猜“不是”