时间戳

首页 > 解决方案 > 如何使用 JavaScript 将完整的 HTML 字符串作为变量读取和更新

javascript - 如何使用 JavaScript 将完整的 HTML 字符串作为变量读取和更新

问题描述

我有一个 JSON 对象，它包含作为字符串的 HTML 以及带有 ID 和要更新的值的元素数组。(i.e ID= Source, Value= Destination)

var myDynamicJSON = {
        "Variables": [{
                "Source": "txtCustomerName",
                "Destination": "Chintan Khetiya"
            },
            {
                "Source": "txtInvoiceDate",
                "Destination": "6/21/2021, 3:29:01 PM"
            }
        ],
        "invoiceEmail": "<!doctype html><html> <head> <meta name="viewport" content="width=device-width" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Email</title> <style> .emailBody { width: 100%; } .messageBodyUserNameFont { margin: 0; font-size: 18px; color: rgb(255, 140, 0); padding: 10px 0 10px 0; display: inline; } .messageBodyTextFont { margin: 0; font-size: 14px; color: rgb(50, 50, 50); line-height: 1.5; display: inline; } </style> </head> <body class="emailBody"> <p id="txtCustomerName" class="messageBodyUserNameFont">,</p> <p id="txtInvoiceDate" class="messageBodyTextFont"></p> </body></html>"
    }

我创建了一个函数来读取myDynamicJSON 执行循环的变量，以通过源和目标 JSON 对象查找和更新元素值。

for (var i in myDynamicJSON.Variables.length) {
        var item = myDynamicJSON.Variables.[i];
        document.getElementById(item.Source).innerHTML = item.Destination;
    }

现在，如何将 JSON 的相同字符串对象更新为完整的 HTML。

我试过了

myDynamicJSON.Variables = myDynamicJSON.Variables.getElementById(item.Source).innerHTML = item.Destination;

（在循环内）但它没有给我更新的 HTML 变量

我的预期输出：（用数组值更新了 JSON 字符串）

"invoiceEmail": "<!doctype html><html> <head> <meta name="viewport" content="width=device-width" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Email</title> <style> .emailBody { width: 100%; } .messageBodyUserNameFont { margin: 0; font-size: 18px; color: rgb(255, 140, 0); padding: 10px 0 10px 0; display: inline; } .messageBodyTextFont { margin: 0; font-size: 14px; color: rgb(50, 50, 50); line-height: 1.5; display: inline; } </style> </head> <body class="emailBody"> <p id="txtCustomerName" class="messageBodyUserNameFont">**Chintan Khetiya**</p> <p id="txtInvoiceDate" class="messageBodyTextFont">**6/21/2021, 3:29:01 PM**</p> </body></html>"

谢谢你的时间！

标签： javascripthtmlcss

解决方案

注意你有太多的 /body /html 标签

注意：我将其更改<body class="emailBody">为<div class="emailBody">

我们可以按照@VLAZ 的建议使用 DOMParser

var myDynamicJSON = {
  "Variables": [{
      "Source": "txtCustomerName",
      "Destination": "Chintan Khetiya"
    },
    {
      "Source": "txtInvoiceDate",
      "Destination": "6/21/2021, 3:29:01 PM"
    }
  ],
  "invoiceEmail": "<!doctype html><html> <head> <meta name=\"viewport\" content=\"width=device-width\" /> <meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\" /> <title>Email</title> <style> .emailBody { width: 100%; } .messageBodyUserNameFont { margin: 0; font-size: 18px; color: rgb(255, 140, 0); padding: 10px 0 10px 0; display: inline; } .messageBodyTextFont { margin: 0; font-size: 14px; color: rgb(50, 50, 50); line-height: 1.5; display: inline; } </style> </head> <body class=\"emailBody\"> <p id=\"txtCustomerName\" class=\"messageBodyUserNameFont\">,</p> <p id=\"txtInvoiceDate\" class=\"messageBodyTextFont\"></p> </body></html>"
}

const doc = new DOMParser().parseFromString(myDynamicJSON.invoiceEmail, "text/html")

myDynamicJSON.Variables.forEach(vari => doc.querySelector("#"+vari.Source).textContent = vari.Destination)
console.log(doc.documentElement )

或 @Teemu 建议的DOMImplementation

var myDynamicJSON = {
  "Variables": [{
      "Source": "txtCustomerName",
      "Destination": "Chintan Khetiya"
    },
    {
      "Source": "txtInvoiceDate",
      "Destination": "6/21/2021, 3:29:01 PM"
    }
  ],
  "invoiceEmail": "<!doctype html><html> <head> <meta name=\"viewport\" content=\"width=device-width\" /> <meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\" /> <title>Email</title> <style> .emailBody { width: 100%; } .messageBodyUserNameFont { margin: 0; font-size: 18px; color: rgb(255, 140, 0); padding: 10px 0 10px 0; display: inline; } .messageBodyTextFont { margin: 0; font-size: 14px; color: rgb(50, 50, 50); line-height: 1.5; display: inline; } </style> </head> <body><div class=\"emailBody\"> <p id=\"txtCustomerName\" class=\"messageBodyUserNameFont\">,</p> <p id=\"txtInvoiceDate\" class=\"messageBodyTextFont\"></p></div> </body></html></body></html>"
}

let HTML = myDynamicJSON.invoiceEmail;
let doc = document.implementation.createHTMLDocument("Email");
let head = doc.querySelector("head");
head.innerHTML = HTML.match(/<head>(.*?)<\/head>/)[1]
let body = doc.querySelector("body");
body.innerHTML = HTML.match(/<body>(.*?)<\/body>/)[1]

myDynamicJSON.Variables.forEach(vari => body.querySelector("#"+vari.Source).textContent = vari.Destination)
console.log(doc.documentElement)

推荐阅读