如何按照我想要的JavaScript / Cheerio从以下HTML中提取文本

Question

我想提取html的文本表格，该表格为 text.html ，如下

<div class="trans-container">
  <ul>
     <p class="wordGroup">
        <span style="font-weight: bold; color: #959595; margin-right: .5em; width : 36px; display: inline-block;">adj.</span>
        <span class="contentTitle"><a class="search-js" href="/w/good/#keyfrom=E2Ctranslation">good</a>
        <span style="font-weight: bold; color: #959595;"> ;</span>
        </span>
        <span class="contentTitle"><a class="search-js" href="/w/fine/#keyfrom=E2Ctranslation">fine</a>
        <span style="font-weight: bold; color: #959595;"> ;</span>
        </span>
        <span class="contentTitle"><a class="search-js" href="/w/ok/#keyfrom=E2Ctranslation">ok</a>
        </span>
     </p>
     <p class="wordGroup">
        <span style="font-weight: bold; color: #959595; margin-right: .5em; width : 36px; display: inline-block;">adv.</span>
        <span class="contentTitle"><a class="search-js" href="/w/well/#keyfrom=E2Ctranslation">well</a>
        </span>
     </p>
     <p class="wordGroup">
        <span style="font-weight: bold; color: #959595; margin-right: .5em; width : 36px; display: inline-block;">misc.</span>
        <span class="contentTitle"><a class="search-js" href="/w/all right/#keyfrom=E2Ctranslation">all right</a>
        </span>
     </p>
  </ul>
</div>

并将其打印为以下格式。

adj. good ; fine ; ok
adv. well
misc. all right

我尝试的是下面的代码

const cheerio = require('cheerio');
const fs = require('fs');
const $ = cheerio.load(fs.readFileSync('./test.html'));
$('div.trans-container').find('p.wordGroup').each(function(i,elm){
  const line = []
  $(this).find('span').each(function(i,elm){
    line[i] = $(this).text().trim()
  })
  console.log(line.join(' '))
});

不幸的是，我们的输入如下，而不是我想要的。谁能帮助我指出我错了的地方？另外，如果您能为我提供其他体面的方法来解决此问题的方法 javascript ，无论有或没有 cheerio 。。

adj. good
         ; ; fine
         ; ; ok
adv. well
misc. all right

Answer 1

只需在主组上使用 text()即.wordGroup，在这种情况下，它将在没有HTML元素的情况下获取元素的所有文本。然后在其上运行replace()，以删除具有单个空间的所有空格字符。

$('div.trans-container').find('p.wordGroup').each(function(i,elm){
  // regex: /s+/g matches 1 or more whitespace characters nrft
  var line = $(this).text().replace(/s+/g," ");
  console.log(line);
});

对于仅使用本机JavaScript进行操作，您无法使用NodeJS来做到这一点，因为它没有本机DOM支持。因此，您必须使用Cheerio或Jsdom之类的模块。如果您是在浏览器中的JavaScript，那就是：

document.querySelectorAll('div.trans-container p.wordGroup')
  .forEach(ele=>console.log( ele.innerText.replace(/s+/g," ") ));

Answer 2

如果您对 <p>标签的每个标签给出ID，则可以使用此脚本访问您的子元素并从中获取值：

var adjElements = document.getElementById("adj").children;
var advElements = document.getElementById("adv").children;
var miscElements = document.getElementById("misc").children;
var adjObject =[];
var advObject =[];
var miscObject =[];

for (var i=0; i<=adjElements.length -1; i++){
    adjObject.push(adjElements[i].innerText);
}
for (var i=0; i<=advElements.length -1; i++){
    advObject.push(advElements[i].innerText);
}
for (var i=0; i<=miscElements.length -1; i++){
    miscObject.push(miscElements[i].innerText);
}
console.log(adjObject); //["adj.", "good ; ", "fine ; ", "ok"]
console.log(advObject); //["adv.", "well"]
console.log(miscObject); //  ["misc.", "all right"]

我为您做一个例子：

https://jsfiddle.net/37g6ture/2/

记住将adj，adv和misc ID添加到您的P标签。

Answer 3

这也许是您要寻找的解决方案

line[i] = $(this).children().length > 0 ? $(this).children(":first-child").text().trim() : $(this).text().trim();

这给出了预期的输出。这检查该节点是否具有子节点，并且仅获取第一个节点文本。如果没有子节点，则只需提取节点文本。

http://api.jquery.com/text/Say

在匹配的集合中获取每个元素的组合文本内容 元素，包括其后代或设置文本内容 匹配的元素。

另一个相关帖子是此https://stackoverflow.com/a/32170000/578855

Answer 4

您的主要问题是双循环。内部$(this).find('span').each正在导致一些跨度超过两次。例如：

<span class="contentTitle">
    <a class="search-js" href="/w/fine/#keyfrom=E2Ctranslation">fine</a>
    <span style="font-weight: bold; color: #959595;"> ;</span>
</span>

在<span class="contentTitle">上调用span.text()将返回fine ;同样，内部跨度<span style="font-weight: bold; color: #959595;">也迭代，并添加第二个;。其次，如果您的目标是删除所有额外的空白，但是离开单个空间，这将起作用.replace(/ss+/g, ' '))

整个代码：

const $ = require('cheerio').load(require('fs').readFileSync('./test.html'));
$('div.trans-container').find('p.wordGroup').each(function(i,elm){
  console.log($(this).text().replace(/ss+/g, ' '));
});

导致

adj. good ; fine ; ok 
adv. well 
misc. all right