首頁猿問如何將 HTML...

如何將 HTML <div..../div> 轉換為具有 name:value 屬性的

JavaScript

翻翻過去那場雪 2023-06-15 10:00:00

我有一個包含多個 HTML div 的文本文件，例如<div id="ID_a" name="VEC" class="cat" title ="scene,-12, 0.5, 0, 1" text = "$\omega =9$"> </div> <div id="ID_b" name="VEC" class="cat" title ="scene,-12, 0.5, 0, 3" text = "$\alfa = 2$"> </div> <div id="ID_c" name="VEC" class="cat" title ="scene,-12, 0.5, 0, 4" text = "$\beta = 30.5$"></div> <div id="ID_d" name="VEC" class="cat" title ="scene,-12, 0.5, 0, 2" text = "$\gamma = 90$"> </div> 我希望將<div ...> </div>文本中的每個語句（使用 javascript）轉換為 javascript 對象規范語句，例如Coll[1] = {id:"ID_a", name: "VEC", class: "cat", title:"scene,-12, 0.5, 0, 1", text = "$\omega =9$" }; Coll[2] = {id:"ID_a", name: "VEC", class: "cat", title:"scene,-12, 0.5, 0, 3", text = "$\alfa = 2$" }; Coll[3] = {id:"ID_a", name: "VEC", class: "cat", title:"scene,-12, 0.5, 0, 4", text = "$\beta = 30.5$" }; Coll[4] = {id:"ID_a", name: "VEC", class: "cat", title:"scene,-12, 0.5, 0, 2", text = "$\gamma = 90$" }; 我想知道是否有一種簡單的方法可以做到這一點？編輯：我想在不使用 DOM 模型或將 div 作為 html 文件的一部分加載的情況下使用純 javascript 來完成。抱歉之前沒有說清楚。

查看完整描述

2 回答

波斯汪

TA貢獻1811條經驗獲得超4個贊

這是你想要的？

let divs = document.querySelectorAll('div');

let obj = [];

divs.forEach(element => {

let e = {

id: element.id,

name: element.getAttribute("name"),

class: element.className,

title: element.title,

text: element.getAttribute("text")

};

obj.push(e);

})

console.log(obj)

反對回復 2023-06-15

紅糖糍粑

TA貢獻1815條經驗獲得超6個贊

假設您將所有 div 作為字符串加載，您可以將每個字符串映射到一個對象。這可以通過按每個屬性拆分字符串（通過regex）然后通過reduce將這些字符串轉換為對象來完成。

因為某些值包含等號，所以我搜索第一次出現的索引，并在將其作為對象返回之前將字符串拆分為帶有切片的鍵和值。

const divs = [

? '<div id="ID_a" name="VEC" class="cat" title ="scene,-12, 0.5, 0, 1" text = "$\omega =9$">? ?</div>',

? '<div id="ID_b" name="VEC" class="cat" title ="scene,-12, 0.5, 0, 3" text = "$\alfa = 2$">? ?</div>',

? '<div id="ID_c" name="VEC" class="cat" title ="scene,-12, 0.5, 0, 4" text = "$\beta = 30.5$"></div>',

? '<div id="ID_d" name="VEC" class="cat" title ="scene,-12, 0.5, 0, 2" text = "$\gamma = 90$"> </div>',

];

const Coll = divs.map((div) => {

? const parts = div.match(/[\w-]+\s?=\s?"[^"]*"/g);

? const objectified = parts.reduce((obj, str) => {

? ? const index = str.indexOf("=");

? ? const key = str.slice(0, index);

? ? const value = str.slice(index + 1, str.length);

? ? obj[key] = value;

? ? return obj;

? }, {});

? return objectified;

});

console.log("Single value:", Coll[0].id);

console.log(Coll);

.as-console-wrapper { max-height: 100% !important; }

反對回復 2023-06-15

2 回答
0 關注
201 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

如何將 HTML <div..../div> 轉換為具有 name:value 屬性的

如何將 HTML <div..../div> 轉換為具有 name:value 屬性的

2 回答

添加回答