如何解析字符串中的HTML標籤和內容？

Question

例如，我有串

'<p class="something">text goes here</p>' 

我想解析出來到每個標籤的陣列和內容，即：

['<p class="something">', 'text goes here', '</p>'] 

Answer 1

您還沒有解釋使用這種情況下，但這個答案會提供相同的數據（數組中組織有點不同），如果需要，可以使用數據重新創建元素。

var test = "<p class='something'>text goes here</p>"; 
 

 
// Set up an element that can contain the parsed string 
 
var dummyElement = document.createElement("div"); 
 

 
// Parse/load the string into the element 
 
dummyElement.innerHTML = test; 
 

 
// Now we can extract metadata about the element and populate the array 
 
var htmlData = []; 
 

 
// Shortcut to element 
 
var el = dummyElement.firstChild; 
 

 
// Push node name into array: 
 
htmlData.push(el.nodeName); 
 

 
// Loop through attributes and put them into array: 
 
for(var x = 0; x < el.attributes.length; x++){ 
 
    htmlData.push(el.attributes[x].nodeName + "=" + el.attributes[x].nodeValue); 
 
} 
 

 
// Put element content (if it has any) into array 
 
htmlData.push(el.textContent); 
 

 
console.log(htmlData);

Answer 2

這不是解決你的問題的更好的方法，但可以幫助你。

const elements = [ 
 
    '<p id="x" required>Content X</p>', 
 
    '<p id="y" class="y">Content Y</p>', 
 
    '<a href="www.google.com">Google</a>' 
 
]; 
 

 
const parser = new DOMParser(); 
 

 
const result = elements 
 
.map(element => parser.parseFromString(element, "text/html")) 
 
.map(html => html.firstElementChild.children[1].children[0]) 
 
.map(child => { 
 
    const nodeName = child.nodeName.toLowerCase(); 
 
    const attrs = [...child.attributes] 
 
    .map(attr => { 
 
     if (attr.value === '') { 
 
     return attr.name; 
 
     } else if (attr.value.indexOf('"') > -1) { 
 
     return `${attr.name}='${attr.value}'`; 
 
     } else { 
 
     return `${attr.name}="${attr.value}"`; 
 
     } 
 
    }) 
 
    .join(' '); 
 
    
 
    return [ 
 
    `<${nodeName} ${attrs}>`, 
 
    child.textContent, 
 
    `</${nodeName}>` 
 
    ]; 
 
}); 
 

 
console.log('Result', JSON.stringify(result, null, 4));