使用普通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個不同的組。

([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是一個只讀的全局對象，因此您的分配不會執行任何操作。 除了像上面的示例中那樣更改變量名稱之外，一種更具結構性的解決方案是確保腳本在本地范圍內運行，而不是在全局范圍內運行。

一種可行的方法是將代碼包裝在立即調用的函數表達式（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

你是這個意思嗎

從可能的保留字更改變量名
在換行符上分割
如果需要零件，請在空間上分開

 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>

使用普通JavaScript遍歷文本節點

問題描述

3 個解決方案

解決方案1
3 已采納 2017-09-26 21:59:21

解決方案2
0 2017-09-26 21:36:40

解決方案3
0 2017-09-26 21:37:35

使用普通JavaScript遍歷文本節點

問題描述

3 個解決方案

解決方案1 3 已采納 2017-09-26 21:59:21

解決方案2 0 2017-09-26 21:36:40

解決方案3 0 2017-09-26 21:37:35

解決方案1
3 已采納 2017-09-26 21:59:21

解決方案2
0 2017-09-26 21:36:40

解決方案3
0 2017-09-26 21:37:35