如何在AppleScript中使用JavaScript來返回聊天室中的用戶列表

Question

試圖返回聊天室中的用戶列表。該HTML看起來像：

<div class="users-list" style="height: 475px; display: block;"> 

一個可擴展到這一點：

<div class="text" data-nick style="float:right">...</div> 
<div class="text" data-nick="user1">...</div> 
<div class="text" data-nick="user2">...</div> 
<div class="text" data-nick="user3">...</div> 
<div class="text" data-nick="user4">...</div> 

使用谷歌瀏覽器的JavaScript控制檯，我做的：

document.body.querySelector("div.users-list") 

它返回原來未發泡的HTML：

<div class="users-list" style="height: 475px; display: block;"> 

有一個下拉箭頭，返回用戶列表中的JavaScript控制檯擴展此：

<div class="text" data-nick style="float:right">...</div> 
<div class="text" data-nick="user1">...</div> 
<div class="text" data-nick="user2">...</div> 
<div class="text" data-nick="user3">...</div> 
<div class="text" data-nick="user4">...</div> 

我想要做的是用戶列表寫入一個文本文件中。我試圖用猛砸做osascript此：

osascript -e \ 
'tell application "Google_Chrome" 
    tell window 1 
     tell active tab 
      execute javascript "document.body.querySelector(\"div.users-list\")" 
     end tell 
    end tell 
end tell' 

但是，當我在終端運行這個它返回一個空行。當我在腳本編輯器中將它作爲AppleScript運行時，它只返回{}

如何使用AppleScript/osascript中的javascript "document.body.querySelector(\"div.users-list\")"返回使用Google Chrome中的JavaScript控制檯返回的相同擴展用戶列表？

Answer 1

Element.querySelector不返回字符串（HTML或其他）;它返回一個Element對象。 Chrome在控制檯中使用文本進行渲染，但AppleScript/osascript可能會以不同的方式渲染它，或根本不渲染。

你可能要考慮使用innerHTML，它返回的內容的HTML作爲字符串：

execute javascript "document.body.querySelector(\"div.users-list\").innerHTML" 

---

由於對字符串數組的適當的渲染，我們可以映射每個在div.users-list一些字符串的孩子，使用Array.prototype.map方法：

execute javascript "[...document.querySelector(\"div.users-list\").children].map(x => x.outerHTML)" 

（這也使得使用spread syntax和arrow functions：

---

當然，你也可以從內部地圖中的每個子格中提取信息並返回信息。下面使用dataset閱讀HTML5 data-*屬性：

execute javascript "[...document.querySelector(\"div.users-list\").children].map(x => x.dataset.nick)" 

和將輸出：

用戶1，用戶2，用戶3，USER4