从 HTML 元素中提取文本并创建对象 [关闭]

Question

我正在尝试整理以下代码，我使用正则表达式并需要一些帮助。

这是我从网站获取后保存到变量中的文本。

[ '<td bgcolor="#2D2F34">&nbsp;<font color="#999999">Name: </font><a href="site.php?page=send&sendto=Username"><font color="#999999">Username</font></a>&nbsp;&nbsp;&nbsp;</td>', '<td bgcolor="#2D2F34">&nbsp;<font color="#999999">Crew: </font><a href="site.php?page=crewprofile&id=2120"><font color="#999999">My Crew</font></a> </td>', '<td bgcolor="#2D2F34">&nbsp;<font color="#999999">Wealth: Rich</font></td>', '<td bgcolor="#2D2F34">&nbsp;<font color="#999999">Rank: Hitman</td>', '<td bgcolor="#2D2F34">&nbsp;<font color="#999999">Status: Alive ( </font><font color=green>Online</font><font color="#999999"> )</font><tr><td bgcolor="#2D2F34">&nbsp;<font color="#999999">Messages sent: 3</font></td>', '<td bgcolor="#2D2F34">&nbsp;<font color="#999999">Messages received: 1</font></td>' ]

此文本也可以包含更多或更少的标签，因为这是从每个“个人资料”都不同的网站获取的。

我希望它返回的是

Name: Username   
Crew: My Crew   
Wealth: Rich   
Rank: Hitman
Status: Alive ( Online )
Messages sent: 3
Messages received: 1

感谢所有帮助！谢谢

Answer 1

您可以使用DocumentFragment 从<td> 元素中提取所需的数据。
对于 Node，看看一些像这样的助手：jsdom@npmjs

const td = [ '<td bgcolor="#2D2F34">&nbsp;<font color="#999999">Name: </font><a href="site.php?page=send&sendto=Username"><font color="#999999">Username</font></a>&nbsp;&nbsp;&nbsp;</td>', '<td bgcolor="#2D2F34">&nbsp;<font color="#999999">Crew: </font><a href="site.php?page=crewprofile&id=2120"><font color="#999999">My Crew</font></a> </td>', '<td bgcolor="#2D2F34">&nbsp;<font color="#999999">Wealth: Rich</font></td>', '<td bgcolor="#2D2F34">&nbsp;<font color="#999999">Rank: Hitman</td>', '<td bgcolor="#2D2F34">&nbsp;<font color="#999999">Status: Alive ( </font><font color=green>Online</font><font color="#999999"> )</font></td>', '<td bgcolor="#2D2F34">&nbsp;<font color="#999999">Messages sent: 3</font></td>', '<td bgcolor="#2D2F34">&nbsp;<font color="#999999">Messages received: 1</font></td>' ];

const tr = document.createElement("tr");
const table = document.createElement("table");
const frag = document.createDocumentFragment(); // Minimal Document wrapper

tr.innerHTML = td.join("");
table.appendChild(tr);
frag.appendChild(table);

const data = [...frag.querySelectorAll("td")].reduce((ob, td) => {
  const a = td.textContent.split(':');
  ob[a[0].trim()] = a.slice(1).join(":").trim();
  return ob;
}, {})

console.log( data );

PS：

!!!? 在您的数组中，您有一个 </font><tr><td ← 它应该是 </font></td>', '<td - 我在上面修复了（不必...因为它被正确解析了）。所以，是的，首先确保你得到一个格式正确的HTML array 至少。

正是因为这样的事情，用正则表达式解析 HTML 是个坏主意。即使有上面​​的错误——HTML 被正确解析了sh——但是提取内容，严格使用正则表达式，会导致它绝对失败。

---

对 Node 使用 jsdom - 您的代码应该如下所示：

const jsdom = require("jsdom");
const { JSDOM } = jsdom;

const td = ['<td bgcolor="#2D2F34">&nbsp;<font color="#999999">Name: </font><a href="site.php?page=send&sendto=Username"><font color="#999999">Username</font></a>&nbsp;&nbsp;&nbsp;</td>', '<td bgcolor="#2D2F34">&nbsp;<font color="#999999">Crew: </font><a href="site.php?page=crewprofile&id=2120"><font color="#999999">My Crew</font></a> </td>', '<td bgcolor="#2D2F34">&nbsp;<font color="#999999">Wealth: Rich</font></td>', '<td bgcolor="#2D2F34">&nbsp;<font color="#999999">Rank: Hitman</td>', '<td bgcolor="#2D2F34">&nbsp;<font color="#999999">Status: Alive ( </font><font color=green>Online</font><font color="#999999"> )</font></td>', '<td bgcolor="#2D2F34">&nbsp;<font color="#999999">Messages sent: 3</font></td>', '<td bgcolor="#2D2F34">&nbsp;<font color="#999999">Messages received: 1</font></td>'];

const dom = new JSDOM(`<table><tr>${td.join("")}</tr></table>`);
const frag = dom.window.document;

const data = [...frag.querySelectorAll("td")].reduce((ob, td) => {
    const a = td.textContent.split(':');
    ob[a[0].trim()] = a.slice(1).join(":").trim();
    return ob;
}, {});

console.log( data );