Question

我有一个从api响应中提取的动态html字符串。样本响应如下

  {
  "success": true,
  "message": "Success",
  "response": {
    "document": {
      "id": "03cb14d6-46d3-11e8-acb9-408d5ce49fe0",
      "name": "Letter",
      "html_content": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n\t<meta charset=\"UTF-8\">\n\t<title>HR3-Offer Letter</title>\n\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n\t<style>\n\t\tbody {\n\t\t\tfont-family: \"Times New Roman\", Times, serif;\n\t\t\tfont-size: 16px;\n\t\t\ttext-align: left;\n\t\t\tline-height: 1.2;\n\t\t}\n\t\th1,\n\t\th2,\n\t\th3,\n\t\th4, h5, h6 {\n\t\t\tfont-weight: normal;\n\t\t\tmargin-top: 0;\n\t\t}\n\t\t#content-wrap {\n\t\t\tbackground: #fff;\n\t\t\tpadding: 50px;\n\t\t}\n\t\t.txt-center {\n\t\t\ttext-align: center;\n\t\t}\n\t\t.txt-upper {\n\t\t\ttext-transform: uppercase;\n\t\t}\n\t\th1 {\n\t\t\tmargin-bottom: 10px;\n\t\t\tfont-size: 23px;\n\t\t}\n\t\tp {\n\t\t\tmargin-bottom: 30px;\n\t\t}\n\t\t.contact-person {\n\t\t\tborder-top: 1px solid #000;\n\t\t\tpadding-top: 40px;\n\t\t\tmargin-bottom: 80px;\n\t\t\twidth: 70%;\n\t\t}\n\t\t.contact-person p {\n\t\t\tmargin: 5px 0 0 0;\n\t\t}\n\t\t.offer-accepted {\n\t\t\tmargin-bottom: 50px;\n\t\t}\n\t\t.offer {\n\t\t\tmargin-right: 15px;\n\t\t}\n\t\t.signature-date .label,\n\t\t.signature-date .value {\n\t\t\tdisplay: inline-block;\n\t\t\twidth: 180px;\n\t\t}\n\t\t.signature-date .label {\n\t\t\twidth: 177px;\n\t\t}\n\t\t.signature-date .value {\n\t\t\tborder-bottom: 1px solid #000;\n\t\t}\n\t\t.highlighter {\n\t\t\tbackground: #ffff00;\n\t\t}\n\t</style>\n</head>\n<body>\n\t<div id=\"content-wrap\">\n\t\t<h1 class=\"txt-center txt-upper\"><%= COMPANY %></h1></body>\n</html>"
    }
  }
}

res.html_content具有html字符串。

我需要创建一个子字符串，其中包含直到body标签为止的所有数据。

输出应如下所示。

<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n\t<meta charset=\"UTF-8\">\n\t<title>HR3-Offer Letter</title>\n\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n\t<style>\n\t\tbody {\n\t\t\tfont-family: \"Times New Roman\", Times, serif;\n\t\t\tfont-size: 16px;\n\t\t\ttext-align: left;\n\t\t\tline-height: 1.2;\n\t\t}\n\t\th1,\n\t\th2,\n\t\th3,\n\t\th4, h5, h6 {\n\t\t\tfont-weight: normal;\n\t\t\tmargin-top: 0;\n\t\t}\n\t\t#content-wrap {\n\t\t\tbackground: #fff;\n\t\t\tpadding: 50px;\n\t\t}\n\t\t.txt-center {\n\t\t\ttext-align: center;\n\t\t}\n\t\t.txt-upper {\n\t\t\ttext-transform: uppercase;\n\t\t}\n\t\th1 {\n\t\t\tmargin-bottom: 10px;\n\t\t\tfont-size: 23px;\n\t\t}\n\t\tp {\n\t\t\tmargin-bottom: 30px;\n\t\t}\n\t\t.contact-person {\n\t\t\tborder-top: 1px solid #000;\n\t\t\tpadding-top: 40px;\n\t\t\tmargin-bottom: 80px;\n\t\t\twidth: 70%;\n\t\t}\n\t\t.contact-person p {\n\t\t\tmargin: 5px 0 0 0;\n\t\t}\n\t\t.offer-accepted {\n\t\t\tmargin-bottom: 50px;\n\t\t}\n\t\t.offer {\n\t\t\tmargin-right: 15px;\n\t\t}\n\t\t.signature-date .label,\n\t\t.signature-date .value {\n\t\t\tdisplay: inline-block;\n\t\t\twidth: 180px;\n\t\t}\n\t\t.signature-date .label {\n\t\t\twidth: 177px;\n\t\t}\n\t\t.signature-date .value {\n\t\t\tborder-bottom: 1px solid #000;\n\t\t}\n\t\t.highlighter {\n\t\t\tbackground: #ffff00;\n\t\t}\n\t</style>\n</head>\n

也就是说，输入字符串包含doctype，title，head和body标签，而输出字符串不应包含body标签和其余字符串。

关于如何实现此目标的任何想法？

Answer 1

在这种情况下，使用正则表达式是最好的方法：

var obj =  {
  "success": true,
  "message": "Success",
  "response": {
    "document": {
      "id": "03cb14d6-46d3-11e8-acb9-408d5ce49fe0",
      "name": "Letter",
      "html_content": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n\t<meta charset=\"UTF-8\">\n\t<title>HR3-Offer Letter</title>\n\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n\t<style>\n\t\tbody {\n\t\t\tfont-family: \"Times New Roman\", Times, serif;\n\t\t\tfont-size: 16px;\n\t\t\ttext-align: left;\n\t\t\tline-height: 1.2;\n\t\t}\n\t\th1,\n\t\th2,\n\t\th3,\n\t\th4, h5, h6 {\n\t\t\tfont-weight: normal;\n\t\t\tmargin-top: 0;\n\t\t}\n\t\t#content-wrap {\n\t\t\tbackground: #fff;\n\t\t\tpadding: 50px;\n\t\t}\n\t\t.txt-center {\n\t\t\ttext-align: center;\n\t\t}\n\t\t.txt-upper {\n\t\t\ttext-transform: uppercase;\n\t\t}\n\t\th1 {\n\t\t\tmargin-bottom: 10px;\n\t\t\tfont-size: 23px;\n\t\t}\n\t\tp {\n\t\t\tmargin-bottom: 30px;\n\t\t}\n\t\t.contact-person {\n\t\t\tborder-top: 1px solid #000;\n\t\t\tpadding-top: 40px;\n\t\t\tmargin-bottom: 80px;\n\t\t\twidth: 70%;\n\t\t}\n\t\t.contact-person p {\n\t\t\tmargin: 5px 0 0 0;\n\t\t}\n\t\t.offer-accepted {\n\t\t\tmargin-bottom: 50px;\n\t\t}\n\t\t.offer {\n\t\t\tmargin-right: 15px;\n\t\t}\n\t\t.signature-date .label,\n\t\t.signature-date .value {\n\t\t\tdisplay: inline-block;\n\t\t\twidth: 180px;\n\t\t}\n\t\t.signature-date .label {\n\t\t\twidth: 177px;\n\t\t}\n\t\t.signature-date .value {\n\t\t\tborder-bottom: 1px solid #000;\n\t\t}\n\t\t.highlighter {\n\t\t\tbackground: #ffff00;\n\t\t}\n\t</style>\n</head>\n<body>\n\t<div id=\"content-wrap\">\n\t\t<h1 class=\"txt-center txt-upper\"><%= COMPANY %></h1></body>\n</html>"
    }
  }
};
var regex_head = /(.|\n)+?\<\/head\>/;
var result = obj['response']['document']['html_content'].match(regex_head);
console.log(result[0]);

从html字符串数据创建子字符串

1 个答案: