Question

我想提取一个Twitter关注按钮的文本，例如，https://twitter.com/Google/followers

当我使用document.getElementsByClassName("user-actions-follow-button js-follow-btn follow-button")[0].innerText时，它会正确显示文本：

请
关注@Google

...当我关注用户时，会显示

继
关注@Google

但是，我无法使用innerText，因为旧版Firefox不支持，因此我使用textContent进行了调查：

但是，当我使用document.getElementsByClassName("user-actions-follow-button js-follow-btn follow-button")[0].textContent时，它会显示以下内容，而不管我是否关注用户： -

请
  关注@Google

继
  关注@Google

取消关注
  取消关注@Google

阻止
  阻止@Google

不阻止
  取消屏蔽@Google

待
  正在等待@Google
的请求
取消
  取消您对@Google的关注请求

如何确保它显示innerText这样的文字，以便我知道我是否关注用户？

以下是该按钮的一些HTML代码： -

<span class="user-actions-follow-button js-follow-btn follow-button">
  <button type="button" class="
    EdgeButton
    EdgeButton--secondary

    EdgeButton--medium 
    button-text
    follow-text">
      <span aria-hidden="true">Follow</span>
      <span class="u-hiddenVisually">Follow <span class="username u-dir u-textTruncate" dir="ltr">@<b>Google</b></span></span>
  </button>
  <button type="button" class="
    EdgeButton
    EdgeButton--primary

    EdgeButton--medium 
    button-text
    following-text">
      <span aria-hidden="true">Following</span>
      <span class="u-hiddenVisually">Following <span class="username u-dir u-textTruncate" dir="ltr">@<b>Google</b></span></span>
  </button>
  <button type="button" class="
    EdgeButton
    EdgeButton--danger

    EdgeButton--medium 
    button-text
    unfollow-text">
      <span aria-hidden="true">Unfollow</span>
      <span class="u-hiddenVisually">Unfollow <span class="username u-dir u-textTruncate" dir="ltr">@<b>Google</b></span></span>
  </button>
  <button type="button" class="
    EdgeButton
    EdgeButton--invertedDanger

    EdgeButton--medium 
    button-text
    blocked-text">
    <span aria-hidden="true">Blocked</span>
    <span class="u-hiddenVisually">Blocked <span class="username u-dir u-textTruncate" dir="ltr">@<b>Google</b></span></span>
  </button>
  <button type="button" class="
    EdgeButton
    EdgeButton--danger

    EdgeButton--medium 
    button-text
    unblock-text">
    <span aria-hidden="true">Unblock</span>
    <span class="u-hiddenVisually">Unblock <span class="username u-dir u-textTruncate" dir="ltr">@<b>Google</b></span></span>
  </button>
  <button type="button" class="
    EdgeButton
    EdgeButton--secondary

    EdgeButton--medium 
    button-text
    pending-text">
    <span aria-hidden="true">Pending</span>
    <span class="u-hiddenVisually">Pending follow request from <span class="username u-dir u-textTruncate" dir="ltr">@<b>Google</b></span></span>
  </button>
  <button type="button" class="
    EdgeButton
    EdgeButton--secondary

    EdgeButton--medium 
    button-text
    cancel-text">
    <span aria-hidden="true">Cancel</span>
    <span class="u-hiddenVisually">Cancel your follow request to <span class="username u-dir u-textTruncate" dir="ltr">@<b>Google</b></span></span>
  </button>
</span>

Answer 1

您可以自己实现innerText，不应包含隐藏的文本。当您使用jQuery标记问题时，可以通过定义$.fn.innerText来使其成为jQuery插件：

$.fn.innerText = function () {
    return (function recurse($nodes) {
        return $.map($nodes, function (node) {
            return node.nodeType === 3 ? node.nodeValue
                : $(node).is(":hidden") ? ""
                : recurse($(node).contents());
        }).join("");
    })(this);
}

const texts = $.map($(".user-actions-follow-button"), function(elem) {
    return $(elem).innerText().trim();
});
console.log(texts);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="user-actions-follow-button">
    <span style="display: none;">Follow @me</span>
    <span style="display: ;">Following @me</span>
</span>

<span class="user-actions-follow-button">
    <span style="display: ;">Follow @her</span>
    <span style="display: none;">Following @her</span>
</span>

如何使用innerText获取文本，但在所有浏览器中工作

1 个答案: