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

问题是控制台上没有打印任何内容(content_holder保持空白).我认为问题是由"==="运算符引起的..

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

Answer 2

一行(更确切地说,一个声明)版本:

function extractContent(html) {

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

}

Answer 3

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

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

Answer 4

使用此正则表达式删除 html 标签并仅将内部文本存储在 html 中

它显示 HelloW3c 只检查它

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