Question

如何将JSON对象转换为HTML？我正在做一个返回JSON对象的get请求＆＃34; _bodyText＆＃34;作为键和HTML作为字符串的值。当我执行JSON.parse（响应）时，我得到了＃34;无法识别的令牌＆＃39;＆lt;＆＃39;＆＃34;＆＃34;＆＃34;

以下是代码本身：

var _handleResponse = function(response){
    console.log(response);
}

var rcscrapper = function() {

fetch('https://community.recurse.com') 
.then(response => response.json())
.then(json => _handleResponse(json)) 
.catch(error => console.log('error: ' + error))
;
}


module.exports = rcscrapper;

我需要访问HTML中包含我需要访问的子元素的div。这样做的最佳方式是什么？

这是请求的JSON：

{"_bodyText":"<!DOCTYPE html>\n<html>\n<head>\n  <title>Community</title>\n  <link rel=\"stylesheet\" media=\"all\" href=\"/assets/application-b5c484ef7115cdd18ed06ce34dcc41a9.css\" data-turbolinks-track=\"true\" />\n  <script src=\"/assets/application-ae06e8fa30cc49100443fa67eb2e5653.js\" data-turbolinks-track=\"true\"></script>\n  <meta name=\"csrf-param\" content=\"authenticity_token\" />\n<meta name=\"csrf-token\" content=\"7Bb+U9qEhyFBQvHpLWQTV6u6nbTm7yRjZqoh/0zOfEsZ+VHEZ1CacmRp+QOxAuPxZdA3W341Nh/Nasl/SWfckw==\" />\n  <link rel=\"shortcut icon\" type=\"image/x-icon\" href=\"/assets/favicon-eea9bfa662ec6b82d29a214be25f4e0e.ico\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no\">\n\n</head>\n<body>\n\n<div id=\"app\"></div>\n<script>\n  community.core.init_app(document.getElementById(\"app\"), \"/assets/logo-small-8b4907edfec6650310c9459c8380c285.png\");\n</script>\n\n\n</body>\n</html>\n","type":"default","url":"","status":200,"headers":{"map":{"":[""]}}}

我需要访问＆＃34; app＆＃34; div，因为它包含我需要的内容。

看起来json正在正确处理 - 如何解析其中包含的HTML？

Answer 1

例如，如果您的JSON包含在response键下的data对象中，则可以执行以下操作：

var myObject = JSON.parse(response.data);
document.write(myObject._bodyText);
document.close();

Answer 2

fetch返回response对象的承诺，您需要在该对象上调用json方法，该方法本身会返回一个承诺。

fetch('community.recurse.com') . 
    then(response => response.json() . 
        then(function(json) { parse_html(json._bodyText); })
    ) .
    catch(error => console.log('error: ' + error))
;

通过调用response.json()获取JSON后，从_bodyText属性获取HTML字符串，并在HTML字符串上调用parse_html将其解析为DOM表示形式，您可以使用标准DOM API访问/查询/操作：

function parse_html(htmlString) {
    var parser = new DOMParser();
    htmlDoc = parser.parseFromString(htmlString, "text/html");
    var document = htmlDoc.documentElement;
    var myDiv = document.querySelector('div.app');
    // Do something with myDiv
}

将JSON对象转换为HTML

2 个答案: