javascript - 无法从表中获取字符串

Question

我的问题是我试图从这个 div 元素内的表中提取所有文本字符串。

我只想提取几个字符串作为示例。 “SoreTruchman”。 此字符串可在 <tr data-player-ref="2"> 下找到这是我想提取的字符串之一。我想提取的所有字符串都在 HTML <tr data-player-ref="SOMENUMBER"> 下.可以有多个。随机数 <tr data-player-ref="somenum">在这些元素之下。我只需要这些字符串，这样我就可以简单地记录它们。

这是一个 HTML 示例，其中包含我要提取的字符串。 (表格的一部分!)

<tr data-player-ref="2">
        <td>SoreTruchman
            <br>
        </td>

“data-player-ref”元素下的所有字符串。一个字符串示例等于“SoreTruchman”。

我已经尝试了很多。您可以在下面的脚本中看到我尝试过的一个示例。 这是我的脚本:

var Row = document.getElementById("team_players");
var Table = Row.getElementsByTagName("table");
var Tbody = Table.getElementsByTagName("tbody")[0];
var tr = Tbody.getElementsByTagName("tr")[0];
var td = tr.getElementsByTagName("td");
console.log(td[0].innerText)

这给了我一个错误。我不确定为什么。我试图将所有元素添加到文本路径的根目录，但没有成功。

谁能帮我从这个 html 中提取文本？

<div id="team_players">
<h3>Players</h3>
<button class="bold-btn" onclick="teamAct('player_list');">Refresh List ↻</button>
<table>
    <thead>
        <tr>
            <th>Name(s)</th>
            <th>Inventory</th>
            <th>Playtime</th>
            <th>Notes</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
        <tr data-player-ref="1">
            <td>Lol
                <br>Lol
                <br>Lol
                <br>Lol
                <br>Lol
                <br>🏁☘️Ｂ۩ＮＫ☘️🏁
                <br>☘️Ｂ☘ＮＫ☘️
                <br>
            </td>
            <td></td>
            <td>43:45:44</td>
            <td><u style="color: #0F0">Online</u><u style="color: #0FF">Captain [1]</u>
                <br><u style="color: #FFF">Possible Alias of SoreTruchman &lt;0&gt;</u>
                <br><u style="color: #FFF">Possible Alias of lol &lt;0&gt;</u></td>
            <td>
                <br>
            </td>
        </tr>
        <tr data-player-ref="2">
            <td>SoreTruchman
                <br>
            </td>
            <td></td>
            <td>5:03</td>
            <td><u style="color: #888">Offline</u><u style="color: #FF0">Crew</u>
                <br><u style="color: #FFF">Possible Alias of ☘️Ｂ☘ＮＫ☘️ &lt;0&gt;</u>
                <br><u style="color: #FFF">Possible Alias of lol &lt;0&gt;</u></td>
            <td>
                <button class="btn-small" onclick="teamAct('rank_guest',2);">Make Guest</button>
                <button class="btn-small btn-blue" onclick="teamAct('rank_captain',2);">Make Captain</button>
                <br>
                <button class="btn-small btn-orange" onclick="teamAct('kick',2);">Kick</button>
                <button class="btn-small btn-red" onclick="teamAct('ban',2);">Ban</button>
            </td>
        </tr>
        <tr data-player-ref="3">
            <td>lol
                <br>
            </td>
            <td></td>
            <td>5:00</td>
            <td><u style="color: #888">Offline</u><u style="color: #FF0">Crew</u>
                <br><u style="color: #FFF">Possible Alias of ☘️Ｂ☘ＮＫ☘️ &lt;0&gt;</u>
                <br><u style="color: #FFF">Possible Alias of SoreTruchman &lt;0&gt;</u></td>
            <td>
                <button class="btn-small" onclick="teamAct('rank_guest',3);">Make Guest</button>
                <button class="btn-small btn-blue" onclick="teamAct('rank_captain',3);">Make Captain</button>
                <br>
                <button class="btn-small btn-orange" onclick="teamAct('kick',3);">Kick</button>
                <button class="btn-small btn-red" onclick="teamAct('ban',3);">Ban</button>
            </td>
        </tr>
    </tbody>
</table>
</div>

也许有 mutations-observer？谢谢。

Answer 1

您可以使用.querySelectorAll() 直接在表中查找所有播放器行。 然后您可以映射 innerHTML 或 textContent。

我更喜欢在这里使用 innerHTML，因为它允许我们在
中断标记上拆分以仅提取名字。 (或根据需要制作完整列表。)

如果我们使用 textContent，我们将不得不根据空白字符进行拆分，如果您允许带有空格的名称，这可能会导致麻烦。

ps:如果可能的话，总是喜欢从一些变量中获取数据，而不是为文本抓取 HTML 标签。 由于 teamAct() 事件是内联编写的，teamAct() 可能是全局的。所以可能还有一个全局变量保存名称。

pps:我们可以通过在控制台中调用 teamAct('kick', someID ) 来作弊吗？

const player_references = document.querySelectorAll( '#team_players tr[data-player-ref]' );

const players = Array
  .from( player_references )
  .map( row => {
    const id = row.getAttribute( 'data-player-ref' );
    // since there are #text nodes between <tr> and the first <td>
    // we cannot actually use .firstChild, since it's not the <td>
    // so we use querySelector again to avoid also counting the #text nodes.
    const name = row
      .querySelector( 'td:first-child' )
      .innerHTML
      .split( '<br>' )[0]
      .trim();
    return { id, name };
  });
  
console.log( players );

<div id="team_players">
<h3>Players</h3>
<button class="bold-btn" onclick="teamAct('player_list');">Refresh List ↻</button>
<table>
    <thead>
        <tr>
            <th>Name(s)</th>
            <th>Inventory</th>
            <th>Playtime</th>
            <th>Notes</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
        <tr data-player-ref="1">
            <td>Lol
                <br>Lol
                <br>Lol
                <br>Lol
                <br>Lol
                <br>🏁☘️Ｂ۩ＮＫ☘️🏁
                <br>☘️Ｂ☘ＮＫ☘️
                <br>
            </td>
            <td></td>
            <td>43:45:44</td>
            <td><u style="color: #0F0">Online</u><u style="color: #0FF">Captain [1]</u>
                <br><u style="color: #FFF">Possible Alias of SoreTruchman &lt;0&gt;</u>
                <br><u style="color: #FFF">Possible Alias of lol &lt;0&gt;</u></td>
            <td>
                <br>
            </td>
        </tr>
        <tr data-player-ref="2">
            <td>SoreTruchman
                <br>
            </td>
            <td></td>
            <td>5:03</td>
            <td><u style="color: #888">Offline</u><u style="color: #FF0">Crew</u>
                <br><u style="color: #FFF">Possible Alias of ☘️Ｂ☘ＮＫ☘️ &lt;0&gt;</u>
                <br><u style="color: #FFF">Possible Alias of lol &lt;0&gt;</u></td>
            <td>
                <button class="btn-small" onclick="teamAct('rank_guest',2);">Make Guest</button>
                <button class="btn-small btn-blue" onclick="teamAct('rank_captain',2);">Make Captain</button>
                <br>
                <button class="btn-small btn-orange" onclick="teamAct('kick',2);">Kick</button>
                <button class="btn-small btn-red" onclick="teamAct('ban',2);">Ban</button>
            </td>
        </tr>
        <tr data-player-ref="3">
            <td>lol
                <br>
            </td>
            <td></td>
            <td>5:00</td>
            <td><u style="color: #888">Offline</u><u style="color: #FF0">Crew</u>
                <br><u style="color: #FFF">Possible Alias of ☘️Ｂ☘ＮＫ☘️ &lt;0&gt;</u>
                <br><u style="color: #FFF">Possible Alias of SoreTruchman &lt;0&gt;</u></td>
            <td>
                <button class="btn-small" onclick="teamAct('rank_guest',3);">Make Guest</button>
                <button class="btn-small btn-blue" onclick="teamAct('rank_captain',3);">Make Captain</button>
                <br>
                <button class="btn-small btn-orange" onclick="teamAct('kick',3);">Kick</button>
                <button class="btn-small btn-red" onclick="teamAct('ban',3);">Ban</button>
            </td>
        </tr>
    </tbody>
</table>
</div>