Question

我尝试使用container.innerText || container.textContent从HTML字符串中删除文本，其中container是我要从中提取文本的元素。

通常，我要提取的文字位于<p>标记中。以下面的HTML为例：

<div id="container">
    <p>This is the first sentence.</p>
    <p>This is the second sentence.</p>
</div>

使用

var container = document.getElementById("container");
var text = container.innerText || container.textContent; // the text I want

将返回This is the first sentence.This is the second sentence.，在第一个句点和第二个句子的开头之间没有空格。

我的总体目标是使用Stanford CoreNLP解析文本，但是它的解析器无法检测到这些是2个句子，因为它们没有空格分隔。有没有更好的方法从HTML中提取文本，使句子被空格字符分隔？

我正在解析的HTML将包含我想要的<p>标记中的文字，但HTML也可能包含<img>，<a>，以及{之间插入的其他标记{1}}代码。

Answer 1

作为一个肮脏的黑客，尝试使用这个：

container.innerHTML.replace(/<.*?>/g," ").replace(/ +/g," ");

这将用空格替换所有标签，然后将多个空格折叠成一个空格。

请注意，如果属性值中包含>，这会让您感到困惑。避免这个问题需要更详细的解析，例如循环遍历所有文本节点并将它们放在一起。

更长但更强大的方法：

function recurse(result, node) {
    var c = node.childNodes, l = c.length, i;
    for( i=0; i<l; i++) {
        if( c[i].nodeType == 3) result += c.nodeValue + " ";
        if( c[i].nodeType == 1) result = recurse(result, c[i]);
    }
    return result;
}
recurse(container);

假设我没有犯一个愚蠢的错误，这将对文本节点执行深度优先搜索，并将结果附加到结果中。

Answer 2

jQuery的方法text()可以满足您的需求。这对你有用吗？

我不确定它是否适合您容器中的所有内容，但它适用于我的示例。它还将采用-tag文本并将其附加到文本中。

$(function() {
    var textToParse = $('#container').text();
    $('#output').html(textToParse);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
    <p>This is the first sentence.</p>
    <p>This is the second sentence.</p>
    <img src="http://placehold.it/200x200" alt="Nice picture"></img>
    <p>Third sentence.</p>
</div>

<h2>output:</h2>
<div id="output"></div>

Answer 3

您可以使用以下功能提取和处理文本，如图所示。它基本上遍历目标元素的所有子节点和子节点的子节点，依此类推......在适当的位置添加spaces：

function getInnerText( sel ) {
    var txt = '';
    $( sel ).contents().each(function() {
        var children = $(this).children();
        txt += ' ' + this.nodeType === 3 ? this.nodeValue : children.length ? getInnerText( this ) : $(this).text();
    });
    return txt;
}

function getInnerText( sel ) {
  var txt = '';
  $( sel ).contents().each(function() {
    var children = $(this).children();
    txt += ' ' + this.nodeType === 3 ? 
      this.nodeValue : children.length ? 
      getInnerText( this ) : $(this).text();
  });
  return txt;
}

alert( getInnerText( '#container' ) );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="container">
    Some other sentence
    <p>This is the first sentence.</p>
    <p>This is the second sentence.</p>
</div>

Answer 4

您可以使用jQuery遍历元素。

这是代码：

$(document).ready(function()
{
    var children = $("#container").find("*");
    var text = "";

    while (children.html() != undefined)
    {
        text += children.html()+"\n";
        children = children.next();
    }

    alert(text);
});

这是小提琴：http://jsfiddle.net/69wezyc5/

在Javascript中从HTML中提取文本的更好方法

4 个答案: