在构造动态 HTML 表单时清理脚本对象中的 HTML

Question

我正在构造一个动态HTML表单，并用来自Javascript对象的数据预填充字段，如下所示：

function generatePersonalForm(data) {

    html= '<form id="personalForm">'

    html+='<label for="fname">First name:</label>'

    html+='<input type="text" id="firstname" name="firstname" value="'+data.billing.contact.firstname+'"><br>'

    html+='<label for="lname">Last name:</label>'

    html+='<input type="text" id="lastname" name="lastname" value="'+data.billing.contact.lastname+'"><br>'

    html+='<label for="lname">Data:</label>'

    html+='<textarea id="emailbody" name="emailbody" rows="12" cols="50" value="'+data.emailbody+'"></textarea><br>'

    html+='<input type="submit" value="Submit">'

    html+='</form>'

    return html;

}

我从API接收数据对象，然后创建表单并预填写：

document.getElementById("personalData").innerHTML = generatePersonalForm(resp);

我的脚本对象有时包含HTML（这是正确和有意的！但是，如果它包含像“（双引号）这样的链接，则对象将破坏表单。data.emailbody<a href=\"http://www.example.com\">www.example.com</a>

单引号也是如此。是否有任何选项可以在动态添加的表单值字段中显示HTML内容？

Answer 1

任何属性值中任何未转义的双引号都将破坏代码。let myExample = 'this is an "example" with double quotes';'<textarea value="' + myExample + '"></textarea>'这将产生以下无效的HTML混乱：<textarea value="this is an "example" with double quotes"></textarea>为防止出现这种情况，您可以转义所有双引号：let escaped = myExample.replace(/"/g, '\\"');// 'this is an \"example\" that will break'这将产生这个有效的HTML：<textarea value="this is an \"example\" with double quotes"></textarea>更好的是，您可以从创建带有字符串的HTML更改为直接创建DOM元素：// append <label>, <input>, <br> to formfunction appendInput(form, labelTxt, inputName, inputValue) {&nbsp; let label = document.createElement('label');&nbsp; form.appendChild(label);&nbsp; label.htmlFor = inputName;&nbsp; label.innerHTML = labelTxt;&nbsp; let input = document.createElement('input');&nbsp; form.appendChild(input);&nbsp; input.id = inputName;&nbsp; input.name = inputName;&nbsp; input.value = inputValue;&nbsp; let br = document.createElement('br');&nbsp; form.appendChild(br);}function generatePersonalForm(data) {&nbsp; const form = document.createElement('form');&nbsp; form.id = 'personalForm';&nbsp;&nbsp;&nbsp; appendInput(form, 'First name:', 'firstname',&nbsp; &nbsp; data.billing.contact.firstname);&nbsp; &nbsp;&nbsp;&nbsp; appendInput(form, 'Last name:', 'lastname',&nbsp; &nbsp; data.billing.contact.lastname);&nbsp; // label and textarea&nbsp; let label = document.createElement('label');&nbsp; form.appendChild(label);&nbsp; label.htmlFor = 'emailbody';&nbsp; label.innerHTML = 'Data:';&nbsp; let txtArea = document.createElement('textarea');&nbsp; form.appendChild(txtArea);&nbsp; txtArea.id = txtArea.name = 'emailbody';&nbsp; txtArea.rows = '12';&nbsp; txtArea.cols = '50';&nbsp; txtArea.value = data.emailbody;&nbsp; let br = document.createElement('br');&nbsp; form.appendChild(br);&nbsp;&nbsp;&nbsp; // submit input&nbsp; let submit = document.createElement('input');&nbsp; form.appendChild(submit);&nbsp; submit.type = 'submit';&nbsp; submit.value = 'Submit';&nbsp;&nbsp;&nbsp; return form;}const dummyData = {&nbsp; billing: {&nbsp; &nbsp; contact: {&nbsp; &nbsp; &nbsp; firstname: 'Joe',&nbsp; &nbsp; &nbsp; lastname: '"the dude" Dokes'&nbsp; &nbsp; &nbsp; }&nbsp; },&nbsp; emailbody: 'this is an "emailbody" with double-quotes'}window.onload = (() => {&nbsp; const formData = generatePersonalForm(dummyData);&nbsp; let result = document.getElementById('result');&nbsp; result.appendChild(formData);})();<div id="result">&nbsp; Result:<br></div>

Answer 2

不能在 中放置超链接。 仅用于处理文本。如果您想要一个带有活动链接的简单文本，那么您应该使用div容器作为文本区域。textareaTextarea

Answer 3

要清理 HTML，您需要将 字符 、 、 、 和 替换为其 HTML 实体，就像以下函数一样：<>"'&function sanitizeHTML(str){&nbsp; return str.replace(/[<>"'&]/g, function(match) {&nbsp; &nbsp; return "&#" + match.charCodeAt(0) + ";";&nbsp; });}然后，在代码中，将 对 的调用替换为 ，您将获得不会破坏代码的清理输出。data.emailbodysanitizeHTML(data.emailbody)