使用普通JavaScript遍历文本节点

Question

 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从跨度获取信息，并将其带到某些结构化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

您可以使用正则表达式以所需的格式从工具提示中获取数据。

我定义了表达式/([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

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

一种可行的方法是将代码包装在立即调用的函数表达式（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主题的​​更多信息，我建议阅读Douglas Crockford的这篇文章 ，或者更好的是，订购他的书Javascript，这是很好的部分 。 一个非常好的阅读恕我直言。

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

Answer 3

你是这个意思吗

1. 从可能的保留字更改变量名
2. 在换行符上分割
3. 如果需要零件，请在空间上分开

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

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