如何在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>

使用Google Chrome浏览器中的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在Bash中这样做：

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"

---

由于为字符串数组提供了适当的呈现方式，因此我们可以使用Array.prototype.map方法将div.users-list每个子级映射到某个字符串：

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

（这也利用了传播语法和箭头函数 ：

---

当然，您也可以从map中的每个子div提取信息，然后返回该信息。 以下使用dataset读取HTML5 data-*属性：

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

并输出：

用户1，用户2，用户3，用户4