在构造动态 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 form

function appendInput(form, labelTxt, inputName, inputValue) {

  let label = document.createElement('label');

  form.appendChild(label);

  label.htmlFor = inputName;

  label.innerHTML = labelTxt;

  let input = document.createElement('input');

  form.appendChild(input);

  input.id = inputName;

  input.name = inputName;

  input.value = inputValue;

  let br = document.createElement('br');

  form.appendChild(br);

}

function generatePersonalForm(data) {

  const form = document.createElement('form');

  form.id = 'personalForm';

  

  appendInput(form, 'First name:', 'firstname',

    data.billing.contact.firstname);

    

  appendInput(form, 'Last name:', 'lastname',

    data.billing.contact.lastname);

  // label and textarea

  let label = document.createElement('label');

  form.appendChild(label);

  label.htmlFor = 'emailbody';

  label.innerHTML = 'Data:';

  let txtArea = document.createElement('textarea');

  form.appendChild(txtArea);

  txtArea.id = txtArea.name = 'emailbody';

  txtArea.rows = '12';

  txtArea.cols = '50';

  txtArea.value = data.emailbody;

  let br = document.createElement('br');

  form.appendChild(br);

  

  // submit input

  let submit = document.createElement('input');

  form.appendChild(submit);

  submit.type = 'submit';

  submit.value = 'Submit';

  

  return form;

}

const dummyData = {

  billing: {

    contact: {

      firstname: 'Joe',

      lastname: '"the dude" Dokes'

      }

  },

  emailbody: 'this is an "emailbody" with double-quotes'

}

window.onload = (() => {

  const formData = generatePersonalForm(dummyData);

  let result = document.getElementById('result');

  result.appendChild(formData);

})();

<div id="result">

  Result:<br>

</div>

Answer 2

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




Answer 3

要清理 HTML，您需要将 字符 、 、 、 和 替换为其 HTML 实体，就像以下函数一样：<>"'&

function sanitizeHTML(str){

  return str.replace(/[<>"'&]/g, function(match) {

    return "&#" + match.charCodeAt(0) + ";";

  });

}

然后，在代码中，将 对 的调用替换为 ，您将获得不会破坏代码的清理输出。data.emailbodysanitizeHTML(data.emailbody)