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

Question

我正在尝试使用 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) 上没有打印任何内容。我认为问题是由 === 运营商引起的。

原文由 Toshkuuu 发布，翻译遵循 CC BY-SA 4.0 许可协议

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

原文由 Rick Hitchcock 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

 function extractContent(html) {
    return new DOMParser()
        .parseFromString(html, "text/html")
        .documentElement.textContent;
}

原文由 user663031 发布，翻译遵循 CC BY-SA 4.0 许可协议