gpt4 book ai didi

javascript - 使用纯 JavaScript 遍历文本节点

转载 作者:太空宇宙 更新时间:2023-11-04 15:55:10 26 4
gpt4 key购买 nike

var history = document.getElementById('tooltip')

console.log(history)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<span id="tooltip">
26 Sep, 17:01 <strong>2.25</strong> <span class="plus">+0.10</span><br>
26 Sep, 16:46 <strong>2.15</strong> <span class="plus">+0.10</span><br>
26 Sep, 12:32 <strong>2.05</strong> <span class="minus">-0.20</span><br>
25 Sep, 13:30 <strong>2.25</strong> <span class="plus">+0.05</span><br>
<br>Opening:<br>25 Sep, 02:28 <strong>2.20</strong><br>
</span>
</body>
</html>

我尝试从 ID 为 tooltip 的 span 中获取信息,并将其带到某个结构化的 javascript 对象中。不幸的是我不能使用 jQuery。 (它是带有 nightmare.js 评估的注入(inject)代码)。

控制台返回

[object History] {
back: function back() { [native code] },
forward: function forward() { [native code] },
go: function go() { [native code] },
length: 4,
pushState: function pushState() { [native code] },
replaceState: function replaceState() { [native code] },
scrollRestoration: "auto",
state: null
}

在我看来像 https://www.w3schools.com/jsref/obj_history.asp

getElementById 函数应该返回一个元素,这样我就可以遍历它的子节点并将数据收集到如下所示:

[
{date: '26 Sep, 17:01', value: 2.25, change: 0.10 },
{date: '26 Sep, 16:46', value: 2.15, change: 0.10 }
// ...
]

最佳答案

您可以使用 regex以您想要的格式从工具提示中获取数据。

我定义了表达式 /([a-zA-Z0-9,: ]+) ([0-9.]+) ([0-9+\-.]+)/g 将每一行分成 3 个不同的组。

  1. ([a-zA-Z0-9,: ]+) 与您的约会相关
  2. ([0-9.]+) 与值相关
  3. ([0-9+\-.]+)与变化相关

在第 3 组中,我保留了 +/-,因为我猜您可能想要跟踪变化是积极的还是消极的。如果你不想要你可以将第 3 组更改为 [+|-]([0-9.]+)

const re = RegExp(/([a-zA-Z0-9,: ]+) ([0-9.]+) ([0-9+\-.]+)/g);

const tooltip = document.getElementById('tooltip');

// get the outerText of the tooltip element

const data = [];

while (item = re.exec(tooltip.outerText)) {
data.push({
date: item[1],
value: item[2],
change: item[3]
});
}

/** [[object Object] {
change: "+0.10",
date: "26 Sep, 17:01",
value: "2.25"
}, [object Object] {
change: "+0.10",
date: "26 Sep, 16:46",
value: "2.15"
}, [object Object] {
change: "-0.20",
date: "26 Sep, 12:32",
value: "2.05"
}, [object Object] {
change: "+0.05",
date: "25 Sep, 13:30",
value: "2.25"
}] **/

console.log(data);

https://jsbin.com/dovahum/edit?html,js,console

关于javascript - 使用纯 JavaScript 遍历文本节点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46436120/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com