选择两个特定标签之间的所有 html 内容并将它们存储在 javascript 对象中

Posted 2023-05-08

【中文标题】选择两个特定标签之间的所有 html 内容并将它们存储在 javascript 对象中

【英文标题】：select all html content between two specific tags and store them in a javascript object

【发布时间】：2020-06-26 19:36:01

【问题描述】：

我在 html 中有这样的东西：

<div class ="personal-datas">Datas</div>
<h2 class ="name">Jack Bauer</h2>
<div class ="date-of-birth">february the 9th 1984</div>
<h3 class ="company">Jane Ventures</h3>
<h5 class ="status">married</h5>
<p class ="country">Canada</p>
<div class ="personal-datas">Datas</div>
<h2 class ="name">Clarice Sterling</h2>
<div class ="date-of-birth">3rd of March 1981</div>
<h3 class ="company">FBI</h3>
<h3 class ="chasing">Buffalo Bill</h3>
<h3 class ="skill">Profiler</h3>
<h5 class ="status">Bachelor</h5>
<p class ="country">USA</p>
<div class ="personal-datas">Datas</div>

我想选择并存储在一个 JSON 文件中，两个标签之间的所有内容都带有“个人数据”类，如下所示：

  "personal-datas1":
    
      "name": "jack bauer",
      "date-of-birth": "february the 9th 1984",
      "company": "Jane Ventures",
      "status": "married",
      "country": "Canada"
    ,
  "personal-datas2":
    
      "name": "Clarice Sterling",
      "date-of-birth": "3rd of March 1981",
      "company": "FBI",
      "chasing": "Buffalo Bill",
      "skill": "Profiler",
      "status": "Bachelor",
      "country": "USA"
    

如何继续使用 vanilla JS 或 Jquery？ 感谢您的回复。

【参考方案1】：

我认为如果可能的话最好重构你的 HTML，而且你的预期输出在语法上也是无效的：

var res = $("[data-personal=personal-datas]").map((_,el) => 
  var o = ;
  var personal = $(el).data('personal') + (_+1);
  o[personal] = ;
  $(el).find('*').each((_, dataEl) => 
    var p = $(dataEl).data('k');
    var v = $(dataEl).text();
    o[personal][p] = v;
  );
  return o;
).get();
console.log(res);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div data-personal ="personal-datas">
  <h2 data-k ="name">Jack Bauer</h2>
  <div data-k ="date-of-birth">february the 9th 1984</div>
  <h3 data-k ="company">Jane Ventures</h3>
  <h5 data-k ="status">married</h5>
  <p data-k ="country">Canada</p>
</div>
<div data-personal ="personal-datas">
  <h2 data-k ="name">Clarice Sterling</h2>
  <div data-k ="date-of-birth">3rd of March 1981</div>
  <h3 data-k ="company">FBI</h3>
  <h3 data-k ="chasing">Buffalo Bill</h3>
  <h3 data-k ="skill">Profiler</h3>
  <h5 data-k ="status">Bachelor</h5>
  <p data-k ="country">USA</p>
</div>

【参考方案2】：

要在 jQuery 中实现这一点，您可以使用 map() 和 nextUntil() 构建包含所需对象的数组。然后，您可以使用检索到的元素的类和内容来填充这些对象。试试这个：

var data = $('.personal-datas').map((i, el) => 
  var obj = ;
  $(el).nextUntil('.personal-datas').each((i, el) => obj[el.className] = el.innerText);
  return obj;
).get();

console.log(data);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <div class="personal-datas">Datas</div>
  <h2 class="name">Jack Bauer</h2>
  <div class="date-of-birth">february the 9th 1984</div>
  <h3 class="company">Jane Ventures</h3>
  <h5 class="status">married</h5>
  <p class="country">Canada</p>
  <div class="personal-datas">Datas</div>
  <h2 class="name">Clarice Sterling</h2>
  <div class="date-of-birth">3rd of March 1981</div>
  <h3 class="company">FBI</h3>
  <h3 class="chasing">Buffalo Bill</h3>
  <h3 class="skill">Profiler</h3>
  <h5 class="status">Bachelor</h5>
  <p class="country">USA</p>
</div>

【参考方案3】：

您可以使用document.getElementByClassName，这将返回一个类似对象的数组，更准确地说是HTMLCollection。

结果将按文档顺序（自上而下，深度优先遍历）返回。

例如，如果您这样做 document.The getElementsByClassName('name'); 它将返回此订单：

<h2 class ="name">Jack Bauer</h2>
<h2 class ="name">Clarice Sterling</h2>

因此，通过将它用于所有类，您可以根据需要构建 JSON。

假设你有相同数量的元素，你可以这样做：

const personalDatas = document.getElementsByClassName('personal-datas');
const names = document.getElementsByClassName('name');
const births = document.getElementsByClassName('date-of-birth');
const companies = document.getElementsByClassName('company');
const statuses = document.getElementsByClassName('status');
const countries = document.getElementsByClassName('country');


const finalJson = ;

for (let i = 0; i < personalDatas.length; ++i) 
  const key = 'personal-datas' + i;
  finalJson[key] = ;
  finalJson[key]['name'] = names[i].innerHTML;
  finalJson[key]['date-of-birth'] = births[i].innerHTML;
  finalJson[key]['company'] = companies[i].innerHTML;
  finalJson[key]['status'] = statuses[i].innerHTML;
  finalJson[key]['country'] = countries[i].innerHTML;


console.log(JSON.stringify(finalJson, null, 2));

<div class ="personal-datas">Datas</div>
<h2 class ="name">Jack Bauer</h2>
<div class ="date-of-birth">february the 9th 1984</div>
<h3 class ="company">Jane Ventures</h3>
<h5 class ="status">married</h5>
<p class ="country">Canada</p>
<div class ="personal-datas">Datas</div>
<h2 class ="name">Clarice Sterling</h2>
<div class ="date-of-birth">3rd of March 1981</div>
<h3 class ="company">FBI</h3>
<h3 class ="chasing">Buffalo Bill</h3>
<h3 class ="skill">Profiler</h3>
<h5 class ="status">Bachelor</h5>
<p class ="country">USA</p>

【参考方案4】：

最好将带有数据属性的 HTML 放在一个 div 中。在下面的代码中，我们将所有字段都包含在 personal-data 中。

这样我们可以循环遍历所有元素并动态分配它们的属性。我们不需要手动访问每个属性。

document.getElementById("js").onclick = function(e) 
  var data = document.querySelectorAll(".personal-datas");

  for (i = 0; i < data.length; i++) 
    var elements = data[i].querySelectorAll("*");

    var objectCollection = [];
    var newObject = ;

    for (j = 0; j < elements.length; j++) 
      if (elements[j].getAttribute("class") != null) 
        newObject[elements[j].getAttribute("class")] = elements[j].innerHTML;
      
    

    objectCollection.push(newObject);
    newObject = ;
  

  var json = JSON.stringify(objectCollection);
  console.log(json);

<button id="js">CLICK ME</button>

<div class="personal-datas">
  Datas <br>
  <h2 class="name">Jack Bauer</h2>
  <div class="date-of-birth">february the 9th 1984</div>
  <h3 class="company">Jane Ventures</h3>
  <h5 class="status">married</h5>
  <p class="country">Canada</p>
</div>

<div class="personal-datas">
  Datas <br>
  <h2 class="name">Clarice Sterling</h2>
  <div class="date-of-birth">3rd of March 1981</div>
  <h3 class="company">FBI</h3>
  <h3 class="chasing">Buffalo Bill</h3>
  <h3 class="skill">Profiler</h3>
  <h5 class="status">Bachelor</h5>
  <p class="country">USA</p>
</div>

【讨论】：

谢谢大家，它适用于您的大多数答案。现在我可以弄清楚该怎么做。很多人感谢 Jordine、V.Sambor、Rory McCrossan、Mamun ??