Question

＆＃13;

var history = document.getElementById('tooltip')
 
console.log(history)

＆＃13;

<!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>

＆＃13;

我尝试从标识tooltip的span获取信息，并将其带到一些结构化的javascript对象。不幸的是我不能使用jQuery。（这是用nightmare.js评估的注入代码）。

控制台返回

[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 }
  // ...
]

Answer 1

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

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

([a-zA-Z0-9,: ]+)与您的约会相关
([0-9.]+)与价值相关
([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

Answer 2

所以这就像有史以来最愚蠢的解决方案但嘿...... :) 您需要做的就是更改变量名称！

var myHistory = document.getElementById('tooltip')
 
console.log(myHistory)

<!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>

history是一个只读的全局对象，因此您的任务不会执行任何操作。除了像上面示例中那样更改变量名称之外，更具结构性的解决方案是确保您的脚本在本地范围内运行，而不是在全局范围内。

一种久经考验的方法是将代码包装在immediately invoked function expression (IIFE)

中

(function(){
var history = document.getElementById('tooltip')
 
console.log(history)
})() // <-- immediately invoke the function here!

<!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>

你真的应该养成使用IIFE代码或更高级模块系统的习惯，以确保你的代码从不在全局范围内运行。否则，每次在全局范围内分配变量时，实际上都是向窗口对象添加属性！这是Javascript的黑暗面之一，但我们必须忍受它。

var x = 10
console.info(window.x)

要了解有关使用匿名函数进行范围设定，创建“私有”变量和其他更高级JS主题的更多信息，我建议您阅读this article by Douglas Crockford，或者更好的是，订购他的图书Javascript, the good parts。非常好的阅读imho。

（我希望推荐一本书不违反政策。如果有，请随时编辑。）

Answer 3

你是说这个吗？

从可能保留的字词
拆分换行
如果您需要零件，请在空间拆分

＆＃13;

var tt = document.getElementById('tooltip')
 
console.log(tt.innerText.split("\n"))

＆＃13;

<!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>

＆＃13;

使用普通javascript遍历文本节点

3 个答案: