使用 Javascript 从 JSON 响应中获取 HTML 标记值答案

【问题标题】：Get HTML tag value from JSON response using Javascript使用 Javascript 从 JSON 响应中获取 HTML 标记值
【发布时间】：2021-02-04 02:30:33
【问题描述】：

我正在尝试使用 javascript 从 JSON 响应中获取 HTML 标记值。

JSON 响应

{
  "@odata.count": 1,
  "value": [
    {
      "isDraft": false,
      "body": {
        "contentType": "html",
        "content": "<html><head>\r\n<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\"><meta content=\"text/html; charset=utf-8\"></head><body style=\"font-family:Arial; font-size:10pt\"><p>The following services are available in Room 1</p><p style=\"font-family:SourceSansPro; font-size:18px; font-weight:bold; color:#272727; margin:20px 0px 0px 0px\">AV Services</p><table style=\"background-color:white; width:100%; max-width:210pt; border-spacing:0; border-collapse:collapse; font-size:10pt\"><tbody><tr><td style=\"font-family:SourceSansPro; font-size:14px; color:#576b76; width:85%; padding:10px 0px 0px 3px\">Test VC</td><td style=\"font-family:SourceSansPro; font-size:14px; font-weight:bold; color:#576b76; text-align:right; padding:10px 3px 0px 0px\">£0.00</td></tr></tbody></table><p style=\"font-family:SourceSansPro; font-size:18px; font-weight:bold; color:#272727; margin:20px 0px 0px 0px\">Supplies</p><table style=\"background-color:white; width:100%; max-width:210pt; border-spacing:0; border-collapse:collapse; font-size:10pt\"><tbody><tr><td style=\"font-family:SourceSansPro; font-size:14px; color:#576b76; width:85%; padding:10px 0px 0px 3px\">Test Sup</td><td style=\"font-family:SourceSansPro; font-size:14px; font-weight:bold; color:#576b76; text-align:right; padding:10px 3px 0px 0px\">£0.00</td></tr></tbody></table><p style=\"font-family:SourceSansPro; font-size:18px; font-weight:bold; color:#272727; margin:20px 0px 0px 0px\">Catering</p><table style=\"background-color:white; width:100%; max-width:210pt; border-spacing:0; border-collapse:collapse; font-size:10pt\"><tbody><tr><td style=\"font-family:SourceSansPro; font-size:14px; color:#576b76; width:85%; padding:10px 0px 0px 3px\">Test Cat</td><td style=\"font-family:SourceSansPro; font-size:14px; font-weight:bold; color:#576b76; text-align:right; padding:10px 3px 0px 0px\">£0.00</td></tr></tbody></table><br><br><br><table align=\"left\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" style=\"border-collapse:separate; line-height:100%; width:200px\"><tbody><tr><td align=\"center\" bgcolor=\"#00b7f1\" valign=\"middle\" style=\"border:none; border-collapse:collapse; padding:12px 0\"><a href=\"https://abc.xyz.com/Core27/BookingForm/BookingForm.aspx?bookingID=Sk55%2bgbbD0B4uRwsW61yKw%3d%3d&amp;dplk=lCXPaOMB6CZQykhWofKF3Q==\" target=\"_blank\" style=\"background-color:#00b7f1; color:#ffffff; font-family:SourceSansPro; font-size:14px; font-weight:600; line-height:1.2; margin:0; text-decoration:none; text-transform:none\"><span style=\"font-weight:bold\">Add services to my booking</span></a></td></tr></tbody></table></body></html>"
      }
    }
  ]
}

邮递员测试脚本

let response = pm.response.json(),
savedData = JSON.stringify(response.value[0].body.content);
pm.environment.set("DeepLink", savedData);
console.log(pm.variables.get("DeepLink"));

它给了我整个 HTML 正文，但如何仅获取 href 标记的值。即

https://abc.xyz.com/Core27/BookingForm/BookingForm.aspx?bookingID=Sk55%2bgbbD0B4uRwsW61yKw%3d%3d&amp;dplk=lCXPaOMB6CZQykhWofKF3Q==

【问题讨论】：

标签： javascript html postman

【解决方案1】：

终于可以使用cheerio解决这个问题

let response = pm.response.json(),
savedData = JSON.stringify(response.value[0].body.content);

var cheerio = require("cheerio");
var $ = cheerio.load(savedData);
link = $('td a').attr('href');

pm.environment.set("DeepLink", link);
console.log(pm.variables.get("DeepLink"));

输出

\"https://abc.xyz.com/Core27/BookingForm/BookingForm.aspx?bookingID=COPJYORMHgTbgrfMMn80YQ%3d%3d&dplk=lCXPaOMB6CZQykhWofKF3Q==&showServiceTab=1\"

【讨论】：

【解决方案2】：

以下应该可以解决问题：

const response={
  "@odata.count": 1,
  "value": [
    {
      "isDraft": false,
      "body": {
        "contentType": "html",
        "content": "<html><head>\r\n<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\"><meta content=\"text/html; charset=utf-8\"></head><body style=\"font-family:Arial; font-size:10pt\"><p>The following services are available in Room 1</p><p style=\"font-family:SourceSansPro; font-size:18px; font-weight:bold; color:#272727; margin:20px 0px 0px 0px\">AV Services</p><table style=\"background-color:white; width:100%; max-width:210pt; border-spacing:0; border-collapse:collapse; font-size:10pt\"><tbody><tr><td style=\"font-family:SourceSansPro; font-size:14px; color:#576b76; width:85%; padding:10px 0px 0px 3px\">Test VC</td><td style=\"font-family:SourceSansPro; font-size:14px; font-weight:bold; color:#576b76; text-align:right; padding:10px 3px 0px 0px\">£0.00</td></tr></tbody></table><p style=\"font-family:SourceSansPro; font-size:18px; font-weight:bold; color:#272727; margin:20px 0px 0px 0px\">Supplies</p><table style=\"background-color:white; width:100%; max-width:210pt; border-spacing:0; border-collapse:collapse; font-size:10pt\"><tbody><tr><td style=\"font-family:SourceSansPro; font-size:14px; color:#576b76; width:85%; padding:10px 0px 0px 3px\">Test Sup</td><td style=\"font-family:SourceSansPro; font-size:14px; font-weight:bold; color:#576b76; text-align:right; padding:10px 3px 0px 0px\">£0.00</td></tr></tbody></table><p style=\"font-family:SourceSansPro; font-size:18px; font-weight:bold; color:#272727; margin:20px 0px 0px 0px\">Catering</p><table style=\"background-color:white; width:100%; max-width:210pt; border-spacing:0; border-collapse:collapse; font-size:10pt\"><tbody><tr><td style=\"font-family:SourceSansPro; font-size:14px; color:#576b76; width:85%; padding:10px 0px 0px 3px\">Test Cat</td><td style=\"font-family:SourceSansPro; font-size:14px; font-weight:bold; color:#576b76; text-align:right; padding:10px 3px 0px 0px\">£0.00</td></tr></tbody></table><br><br><br><table align=\"left\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" style=\"border-collapse:separate; line-height:100%; width:200px\"><tbody><tr><td align=\"center\" bgcolor=\"#00b7f1\" valign=\"middle\" style=\"border:none; border-collapse:collapse; padding:12px 0\"><a href=\"https://abc.xyz.com/Core27/BookingForm/BookingForm.aspx?bookingID=Sk55%2bgbbD0B4uRwsW61yKw%3d%3d&amp;dplk=lCXPaOMB6CZQykhWofKF3Q==\" target=\"_blank\" style=\"background-color:#00b7f1; color:#ffffff; font-family:SourceSansPro; font-size:14px; font-weight:600; line-height:1.2; margin:0; text-decoration:none; text-transform:none\"><span style=\"font-weight:bold\">Add services to my booking</span></a></td></tr></tbody></table></body></html>"
      }
    }
  ]
}, div=document.createElement("div");

div.innerHTML=response.value[0].body.content;
console.log(div.querySelector("a").href);

严格来说，<div> 不能真正包含 <html> 元素，但它似乎仍然有效。

【讨论】：

ReferenceError: 文档未定义
啊，我假设您在浏览器上下文中应用 JavaScript。这是一个 node.js 应用程序吗？如果是这样，也许以下内容可能会有所帮助：stackoverflow.com/questions/51148846/… 或者，这个：stackoverflow.com/a/55668667/2610061

【解决方案3】：

这类似于Parse an HTML string with JS

创建一个 HTML 元素：

var el = document.createElement(savedData);

导入 HTML：

el.innerHTML = savedData;

获取a元素：

let a = el.getElementsByTagName('a')

然后从a元素中获取href：

let link = a[0].href;

【讨论】：

ReferenceError: document is not defined 它在邮递员测试中不起作用。