從document.querySelectorAll獲取兩個專案-有解無憂

我想從 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=ihub

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>

uj5u.com熱心網友回復：

我必須完成一些 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(', '));

uj5u.com熱心網友回復：

您可以使用nextElementSibling獲取包含姓氏的元素。

console.log(Array.from(
  document.querySelectorAll('span.text.given-name'), 
  e => e.textContent   ' '   e.nextElementSibling.textContent
));

<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>

uj5u.com熱心網友回復：

您可以遍歷包含名稱跨度的作者錨點。然后用于querySelector在作者內部查找給定的名字和姓氏。

const authors = document.querySelectorAll('.author');

const names = Array.from(authors).map(author => {
  const givenName = author.querySelector('.given-name');
  const surName = author.querySelector('.surname');
  return `${givenName.textContent} ${surName.textContent}`;
});

console.log(names);

<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>

uj5u.com熱心網友回復：

我認為nextSibling在這種情況下很有用：

let output = [];

document.querySelectorAll(".given-name").forEach( el => output.push(el.outerText   " "   el.nextSibling.outerText));

console.log(output);

<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>

uj5u.com熱心網友回復：

我會使用一個好的選擇器和一個 forEach

const names = []
document.querySelectorAll('#author-group span.text')
  .forEach((span,i) => { 
    if (span.classList.contains("given-name")) names.push(span.textContent); 
    else names[names.length-1]  = ` ${span.textContent}`
  })
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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/352351.html

標籤：javascript

上一篇：使用v-html從textarea添加CSS規則

下一篇：添加一個用javascript包圍其他元素