如何从json打印确切的html标签

Question

我有一个json数据样本

[{
    "Field1": "<header class=\"main-header dark-bg\">\n\t\t<div class=\"row\">\n\t\t\t\t<div class=\"col-xl-3\">\n<a class=\"icons-darkbg-slogan main-header__slogan\" data-event_engagement=\"\" data-event_linktype=\"internal page link\" data-event_source=\"DAM|active|de|de|/\" data-event_target=\"/\" data-event_title=\"Header Home::Slogan\" href=\"/\" target=\"_self\" title=\"DWS Homepage\"><img src=\"/globalassets/images/logos/dws_logo_global.svg\" class=\"icon-svg hide-for-print\" alt=\"dws_logo_global\"></a>\t\t\t\t</div>\n\t\t\t\t<nav class=\"col-xl-9 hide-lg main-header__group\">\n\n        <ul class=\"list-inline pipe-separator text-medium pull-right hide-for-print\">\n\n\n \n\n\n    <li class=\"\">\n        <a data-event_component_headline=\"\" data-event_component_name=\"header-navigation\" data-event_engagement=\"\" data-event_linktype=\"internal page link\" data-event_source=\"DAM|active|de|de|/\" data-event_target=\"/das-unternehmen/\" data-event_title=\"Über Uns\" href=\"/das-unternehmen/\" target=\"_self\" title=\"Über Uns\" class=\"\">Über Uns</a>\n    </li>\n\n    <li class=\"\">\n        <a data-event_component_headline=\"\" data-event_component_name=\"header-navigation\" data-event_engagement=\"\" data-event_linktype=\"internal page link\" data-event_source=\"DAM|active|de|de|/\" data-event_target=\"/service/\" data-event_title=\"Service\" href=\"/service/\" target=\"_self\" title=\"Service\" class=\"\">Service</a>\n    </li>\n\n    <li class=\"\">\n        <a data-event_component_headline=\"\" data-event_component_name=\"header-navigation\" data-event_engagement=\"\" data-event_linktype=\"internal page link\" data-event_source=\"DAM|active|de|de|/\" data-event_target=\"/service/dws-direkt/\" data-event_title=\"DWS Direkt\" href=\"/service/dws-direkt/\" target=\"_self\" title=\"DWS Direkt\" class=\"\">DWS Direkt</a>\n    </li>\n\n    <li class=\"\">\n        <a data-event_component_headline=\"\" data-event_component_name=\"header-navigation\" data-event_engagement=\"\" data-event_linktype=\"external link\" data-event_source=\"DAM|active|de|de|/\" data-event_target=\"https://depot.dws.de/\" data-event_title=\"DWS Depot Login\" href=\"https://depot.dws.de/\" target=\"_blank\" title=\"DWS Depot Login\" class=\"\">DWS Depot Login</a>\n    </li>\n\n    <li class=\"\">\n        <a data-event_component_headline=\"\" data-event_component_name=\"header-navigation\" data-event_engagement=\"\" data-event_linktype=\"internal page link\" data-event_source=\"DAM|active|de|de|/\" data-event_target=\"/service/berater-welt/\" data-event_title=\"Berater\" href=\"/service/berater-welt/\" target=\"_self\" title=\"Berater\" class=\"\">Berater</a>\n    </li>\n\n    <li class=\"\">\n        <a data-event_component_headline=\"\" data-event_component_name=\"header-navigation\" data-event_engagement=\"\" data-event_linktype=\"external link\" data-event_source=\"DAM|active|de|de|/\" data-event_target=\"https://dws.com/de/\" data-event_title=\"DWS Group\" href=\"https://dws.com/de/\" target=\"_blank\" title=\"DWS Group\" class=\"\">DWS Group</a>\n    </li>\n            \n\t\t\t\n        </ul>\n\n\t\t\t\t</nav>\n\t\t</div>\n\n\t\t<div class=\"space-9 hide-md\"></div>\n\t</header>"
  }]

我想在表中显示field1的所有HTML标记，我在ajax成功时尝试了此代码

var html = '<table border="1">';
        html += '<th id="keypress">KEY</th>';
        html += '<th>VALUE</th>';

    for (var key in mainObject) {
          var innerObject = mainObject[key]
          for (var innerKey in innerObject) {

            html += '<tr>';
            var t = innerObject[innerKey];
            var ud = $(t).attr('class');

            html += '<td>' + innerKey + '</td>';
            html += '<td>' + $(t).html() + '</td>';

            html += '</table>';

 displayResources.html(html)

输出截图

我用过.text（），$。parsejson和json.stringify（），但无法获取输出。 请帮我。 查看图片以供参考

Answer 1

您提供的代码段不足以为我们提供解决方案，但我认为您可以使用

//Value return from XML HttpRequest
var fieldArr = JSON.parse(returnValue);
var field1 = fieldArr[0].Field1;

Answer 2

您可以使用document.createElement创建tr和td ，然后追加文本而不用.innerText将其解析为HTMLElement 。

 var html = '<table border="1">'; var mainObject = [{"Field1":"<div class=\\"row\\">something else here</div>"}] html += '<tr>' html += '<th id="keypress">KEY</th>'; html += '<th>VALUE</th>'; html += '</tr>'; for (var key in mainObject) { var innerObject = mainObject[key]; for (var innerKey in innerObject) { var t = innerObject[innerKey]; var ud = $(t).attr('class'); var row = document.createElement('tr'); var col1 = document.createElement('td'); col1.innerText = innerKey; row.appendChild(col1); var col2 = document.createElement('td'); col2.innerText = t; row.appendChild(col2); html += $(row).html(); } } html += '</table>'; var displayResources = $('#displayResources'); displayResources.html(html); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="displayResources"></div> 

或者只是逃避<和>

 var html = '<table border="1">'; var mainObject = [{"Field1":"<div class=\\"row\\">something else here</div>"}] html += '<tr>' html += '<th id="keypress">KEY</th>'; html += '<th>VALUE</th>'; html += '</tr>'; for (var key in mainObject) { var innerObject = mainObject[key]; for (var innerKey in innerObject) { var t = innerObject[innerKey]; var ud = $(t).attr('class'); html += '<tr>'; var t = innerObject[innerKey]; var ud = $(t).attr('class'); html += '<td>' + innerKey + '</td>'; html += '<td>' + t.replace(/</g,'&lt;').replace(/>/g,'&gt;') + '</td>'; html += '</tr>'; } } html += '</table>'; var displayResources = $('#displayResources'); displayResources.html(html); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="displayResources"></div>