时间戳

首页 > 解决方案 > 从 HTML 元素中提取文本并创建对象

javascript - 从 HTML 元素中提取文本并创建对象

问题描述

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

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

[ '<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

感谢所有帮助！谢谢

标签： javascriptnode.jsregex

解决方案

您可以使用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——但提取内容，严格使用正则表达式，会使其绝对失败。

将 jsdom 用于 Node - 您的代码应如下所示：

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

推荐阅读