從html字串獲取資料并推送到陣列

所以我正在發出一個帖子請求，回應是一串 html，我試圖從"dropUser"html 字串的一部分獲取資料，但我遇到了一些麻煩，希望有人可以幫助我或指出我在正確的方向。

我的目標是從"dropUser"html 字串中獲取資料并將它們推送到陣列中。

例如，ID 4289985 和用戶名“MeowCat”我想獲取所有這些并推送到一個陣列。

let str = `<div id="container_user">
  <div >
    <div >
      Online <span >4</span>
    </div>
  </div>
  <div >
    <div onclick="dropUser(this,5,'ChatAveBot',1,1,'ZZ','','0','');" >
      <div ><img  src="/avatar/default_avatar.png" /> </div>
      <div >
        <p >ChatAveBot</p>
      </div>
      <div ><img src="default_images/rank/bot.svg"  title="Bot" /></div>
    </div>
    <div onclick="dropUser(this,3754679,'Fantastic',1,0,'ZZ','','14','');" >
      <div ><img  src="/avatar/avatar_user3754679_1638955491.jpg" /> </div>
      <div >
        <p >Fantastic</p>
        <p >TheDD7デイビスになる =??</p>
      </div>
    </div>
    <div onclick="dropUser(this,4290052,'cefefef',0,0,'AU','','13','');" >
      <div ><img  src="/avatar/default_guest.png" /> </div>
      <div >
        <p >cefefef</p>
      </div>
    </div>
    <div onclick="dropUser(this,4289985,'MeowCat',0,0,'AU','','13','');" >
      <div ><img  src="/avatar/default_guest.png" /> </div>
      <div >
        <p >MeowCat</p>
      </div>
    </div>
  </div>
  <div ></div>
</div>`;

let data = [];
//let info = str.split(`'`).forEach(e => e.includes("dropUser"));
console.log(str.split(`'`));

uj5u.com熱心網友回復：

嘗試這個：

const htmlStr = `<div id="container_user">
  <div >
    <div >
      Online <span >4</span>
    </div>
  </div>
  <div >
    <div onclick="dropUser(this,5,'ChatAveBot',1,1,'ZZ','','0','');" >
      <div ><img  src="/avatar/default_avatar.png" /> </div>
      <div >
        <p >ChatAveBot</p>
      </div>
      <div ><img src="default_images/rank/bot.svg"  title="Bot" /></div>
    </div>
    <div onclick="dropUser(this,3754679,'Fantastic',1,0,'ZZ','','14','');" >
      <div ><img  src="/avatar/avatar_user3754679_1638955491.jpg" /> </div>
      <div >
        <p >Fantastic</p>
        <p >TheDD7デイビスになる =??</p>
      </div>
    </div>
    <div onclick="dropUser(this,4290052,'cefefef',0,0,'AU','','13','');" >
      <div ><img  src="/avatar/default_guest.png" /> </div>
      <div >
        <p >cefefef</p>
      </div>
    </div>
    <div onclick="dropUser(this,4289985,'MeowCat',0,0,'AU','','13','');" >
      <div ><img  src="/avatar/default_guest.png" /> </div>
      <div >
        <p >MeowCat</p>
      </div>
    </div>
  </div>
  <div ></div>
</div>`;

function getUsers(str) {
  let div = document.createElement("div");
  div.innerHTML = str;
  return [...div.querySelectorAll('.user_item')].map(item => {
    let id = item.getAttribute('onclick').split(',')[1];
    let username = item.querySelector('.username').innerHTML;
    return {username, id};
  })
};
console.log(getUsers(htmlStr));

uj5u.com熱心網友回復：

我為每個 user_item Div 添加了兩個新屬性，以將 html 字串作為文本讀取。在這個 html 中找到data-id。

let str =`<div id="container_user">
    <div >
        <div >
            Online <span >4</span>
        </div>
    </div>
    <div >
        <div onclick="dropUser(this,5,'ChatAveBot',1,1,'ZZ','','0','');"  data-id="1" data-name="ChatAveBot">
            <div ><img  src="/avatar/default_avatar.png" /> </div>
            <div >
                <p >ChatAveBot</p>
            </div>
            <div ><img src="default_images/rank/bot.svg"  title="Bot" /></div>
        </div>

    </div>
    <div ></div>
</div>`;

這是將所有內容推送到陣列中的腳本

const Users = [];
    $.each($(str).find('.user_item'), (userIndex, User) => {
        let _user = {};
        _user.id = $(User).attr('data-id');
        _user.Name = $(User).attr('data-name');
        Users.push(_user);
    });

uj5u.com熱心網友回復：

我可以建議一種解決方案，因為原始帖子要求傳遞給 dropUser 函式的引數需要推送到陣列中。此解決方案使用正則運算式和小字串操作。

var regex=/dropUser\([A-Za-z0-9,'"]*\)/g;
var result=str.match(regex);
var argumentsArray = new Array();

result.forEach(input =>{ input = input.replace("dropUser(",""); input = input.replace('\)',''); argumentsArray.push(input) })
console.log(argumentsArray) //this will be a 2D array.

在此之后，您應該能夠提取用戶名和 ID，而不是從 .username 標簽中讀取。

標籤：javascript

上一篇：如何計算所有產品的折扣

下一篇：按其欄位串列對陣列進行排序