Convert XML string contains HTML entity

Question

I have following XML string and I need to extract values inside <parameterizedString> tag to an HTML table

const strXML = '<steps id="0" last="4"><step id="1" type="ValidateStep"><parameterizedString isformatted="true">&lt;DIV&gt;&lt;P&gt;Action Field 001&lt;/P&gt;&lt;/DIV&gt;</parameterizedString><parameterizedString isformatted="true">&lt;DIV&gt;&lt;P&gt;Expected Result Field 001&lt;/P&gt;&lt;/DIV&gt;</parameterizedString><description/></step></steps>';

const doc = new DOMParser().parseFromString(strXML, "application/xml");
console.log(doc.documentElement.textContent)

its throwing error error when I parse it,

Even tried to replace the string using following function, still failed.

function decodeEntities(encodedString) {
    var translate_re = /&(nbsp|amp|quot|lt|gt);/g;
    var translate = {
        "nbsp":" ",
        "amp" : "&",
        "quot": "\"",
        "lt"  : "<",
        "gt"  : ">"
    };
    return encodedString.replace(translate_re, function(match, entity) {
        return translate[entity];
    }).replace(/&#(\d+);/gi, function(match, numStr) {
        var num = parseInt(numStr, 10);
        return String.fromCharCode(num);
    });
}

Answer 1

Here is how to create a table the recommended way - the innerHTML statement could be safer if the textContent was sanitized first.

const strXML = `<steps id="0" last="4"><step id="1" type="ValidateStep"><parameterizedString isformatted="true">&lt;DIV&gt;&lt;P&gt;Action Field 001&lt;/P&gt;&lt;/DIV&gt;</parameterizedString><parameterizedString isformatted="true">&lt;DIV&gt;&lt;P&gt;Expected Result Field 001&lt;/P&gt;&lt;/DIV&gt;</parameterizedString><description/></step><step id="2" type="RunStep"><parameterizedString isformatted="true">&lt;DIV&gt;&lt;P&gt;Action Field 001&lt;/P&gt;&lt;/DIV&gt;</parameterizedString><parameterizedString isformatted="true">&lt;DIV&gt;&lt;P&gt;Expected Result Field 001&lt;/P&gt;&lt;/DIV&gt;</parameterizedString><description/></step></steps>`;


const doc = new DOMParser().parseFromString(strXML, "application/xml");

const steps = [...doc.querySelectorAll('step')]

const table = document.createElement("table");
const tbody = document.createElement("tbody");
steps.forEach(step => { console.log(step.querySelector("parameterizedString").textContent)
  const row = document.createElement("tr");
  const cell1 = document.createElement("td");
  cell1.textContent = step.getAttribute("type");
  const cell2 = document.createElement("td");
  cell2.innerHTML = step.querySelector("parameterizedString").textContent;
  row.append(cell1)
  row.append(cell2)
  tbody.append(row)
})
table.append(tbody);
document.body.append(table);

// const fragment = document.createElement("div");
// fragment.innerHTML = doc.documentElement.textContent;
// console.log(fragment.innerHTML)
// document.body.append(fragment)

td { border: 1px solid black; }
table div p { margin:0; padding:0;}