從 document.querySelectorAll 獲取兩個項目

menteith 发表于 Dev

曼蒂思

我想從 HTML 標籤中提取數據以形成以下字符串：

Adrien Petitpas, Julien M.Jaquet, Pascal Sciarini

其中Adrien,Julien M.和Pascal是名字，其他 - 姓氏。

這是我提取名稱的方式：

Array.from(document.querySelectorAll('span.text.given-name')).map(s=>s.outerText)

它給了我： ['Adrien', 'Julien M.', 'Pascal']

提取姓氏也很容易：

Array.from(document.querySelectorAll('span.text.surname')).map(s=>s.outerText)

如何結合我的兩個選擇，將名字和姓氏結合起來？

我嘗試了下面的腳本，但得到了錯誤的結果：'Adrien Petitpas'，這只是標籤中的第一個人。

請注意，我對 vanilla JavaScript 感興趣。

這是我的 html 文本頁面：https : //www.sciencedirect.com/science/article/pii/S0261379420301244?via%3Dihub

const names = Array.from(document.querySelectorAll('#author-group'))
  .map(e => e.querySelector('span.text.given-name').outerText + ' ' + e.querySelector('span.text.surname').outerText)
  .join(', ');

console.log(names)

<div id="author-group">
<span class="text given-name">Adrien</span><span class="text surname">Petitpas</span>
<svg focusable="false" viewBox="0 0 106 128" width="19.875" height="24" class="icon icon-person">
       <path d="m11.07 1.2e2l0.84-9.29c1.97-18.79 23.34-22.93 41.09-22.93 17.74 0 39.11 4.13 41.08 22.84l0.84 9.38h10.04l-0.93-10.34c-2.15-20.43-20.14-31.66-51.03-31.66s-48.89 11.22-51.05 31.73l-0.91 10.27h10.03m41.93-102.29c-9.72 0-18.24 8.69-18.24 18.59 0 13.67 7.84 23.98 18.24 23.98s18.24-10.31 18.24-23.98c0-9.9-8.52-18.59-18.24-18.59zm0 52.29c-15.96 0-28-14.48-28-33.67 0-15.36 12.82-28.33 28-28.33s28 12.97 28 28.33c0 19.19-12.04 33.67-28 33.67"></path>
    </svg>
<svg focusable="false" viewBox="0 0 102 128" width="19.125" height="24" class="icon icon-envelope">
       <path d="m55.8 57.2c-1.78 1.31-5.14 1.31-6.9 0l-31.32-23.2h69.54l-31.32 23.19zm-55.8-24.78l42.94 32.62c2.64 1.95 6.02 2.93 9.4 2.93s6.78-0.98 9.42-2.93l40.24-30.7v-10.34h-102zm92 56.48l-18.06-22.74-8.04 5.95 17.38 21.89h-64.54l18.38-23.12-8.04-5.96-19.08 24.02v-37.58l-1e1 -8.46v61.1h102v-59.18l-1e1 8.46v35.62"></path>
    </svg>
</span>
</a>
<a class="author size-m workspace-trigger" name="bau2" href="#!">
  <span class="content">
          <span class="text given-name">Julien M.</span><span class="text surname">Jaquet</span>
  <svg focusable="false" viewBox="0 0 102 128" width="19.125" height="24" class="icon icon-envelope">
             <path d="m55.8 57.2c-1.78 1.31-5.14 1.31-6.9 0l-31.32-23.2h69.54l-31.32 23.19zm-55.8-24.78l42.94 32.62c2.64 1.95 6.02 2.93 9.4 2.93s6.78-0.98 9.42-2.93l40.24-30.7v-10.34h-102zm92 56.48l-18.06-22.74-8.04 5.95 17.38 21.89h-64.54l18.38-23.12-8.04-5.96-19.08 24.02v-37.58l-1e1 -8.46v61.1h102v-59.18l-1e1 8.46v35.62"></path>
          </svg>
  </span>
</a>
<a class="author size-m workspace-trigger" name="bau3" href="#!">
  <span class="content">
    <span class="text given-name">Pascal</span><span class="text surname">Sciarini</span>
</div>

馬扎迪布

我必須完成一些 HTML 才能使其正常工作，但這是一種方法。

您當前方法的問題在於您的map函數接收一個包含單個元素的數組。因此，當前的輸出就是它的樣子。

我只是將您的選擇器從#author-groupto更改為#author-group .author, 以.author在#author-group

console.log(Array.from(document.querySelectorAll('#author-group .author'))
  .map(e => e.querySelector('span.text.given-name').outerText + ' ' + e.querySelector('span.text.surname').outerText)
  .join(', '));

<div id="author-group">
  <a class="author size-m workspace-trigger" name="bau1" href="#!">
    <span class="content">
<span class="text given-name">Adrien</span><span class="text surname">Petitpas</span>
    </span>
  </a>
  <a class="author size-m workspace-trigger" name="bau2" href="#!">
    <span class="content">
      <span class="text given-name">Julien M.</span><span class="text surname">Jaquet</span>
    </span>
  </a>
  <a class="author size-m workspace-trigger" name="bau3" href="#!">
    <span class="content">
<span class="text given-name">Pascal</span><span class="text surname">Sciarini</span>
    </span>
  </a>
</div>

另一種方法，如果你想結合你到現在為止想出來的東西，那就是連接兩個數組：

const givenNames = Array.from(document.querySelectorAll('span.text.given-name')).map(s => s.outerText)

const surnames = Array.from(document.querySelectorAll('span.text.surname')).map(s => s.outerText)

console.log(givenNames.map((givenName, i) => givenName + ' ' + surnames[i]).join(', '));

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。