不使用InnerHTML从HTML中提取文本内容

Question

我有一个HTML内容，我正试图提取文本。在HTML内容中，我有gif图像。因此，使用InnerHTML提取文本过程需要更长的时间。

有没有办法从HTML标签中提取文本而不使用InnerHTML?

现在我正在使用下面的代码。

function extractText(html) {
const span = document.createElement('span');
span.innerHTML = html;
return span.textContext || span.innerText;
}

有没有其他方法可以替代上述方法?我们可以使用任何正则表达式吗?

Answer 1

如果传递给extractText(html)的参数是一个文本字符串，您的方法是正确的(将文本分配给已创建元素的innerHTML属性，但您随后要提取的东西是该元素的. innertext)。此属性包含文本，减去任何html标记。

演示使用div作为创建的元素(可能比span更好，因为它可以容纳任何其他元素):

const html="<div>debuggin is <span>not</span> fun</div>";
const holder = document.createElement('div');
holder.innerHTML = html;
console.log(holder.innerText);
const html2="<div style="color:red;"><p>This is test</p><img src="test.gif" /></div>"
const holder2 = document.createElement('div');
holder2.innerHTML = html2;
console.log(holder2.innerText);

Answer 2

尝试:

var parser = new DOMParser();
var html = parser.parseFromString(html, 'text/html');

(function(){
var html = "<div style=color:red><p>This is test</p><img alt=test src=test.gif></div>"
extractText(html);
function extractText(html) {
const span = document.createElement('span');
var parser = new DOMParser();
var htmlParsed = parser.parseFromString(html, 'text/html');
let text = htmlParsed.querySelector("p").textContent
span.textContent = text;
document.body.appendChild(span);
}

})();