首頁猿問在構造動態 HTML...

在構造動態 HTML 表單時清理腳本對象中的 HTML

JavaScript

嗶嗶one 2022-09-29 17:56:25

我正在構造一個動態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內容？

查看完整描述

3 回答

夢里花落0921

TA貢獻1772條經驗獲得超6個贊

任何屬性值中任何未轉義的雙引號都將破壞代碼。

let myExample = 'this is an "example" with double quotes';

'<textarea value="' + myExample + '"></textarea>'

這將產生以下無效的HTML混亂：

為防止出現這種情況，您可以轉義所有雙引號：

let escaped = myExample.replace(/"/g, '\\"');

// 'this is an \"example\" that will break'

這將產生這個有效的HTML：

更好的是，您可以從創建帶有字符串的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);

})();

Result:<br>

</div>

反對回復 2022-09-29

千萬里不及你

TA貢獻1784條經驗獲得超9個贊

不能在中放置超鏈接。僅用于處理文本。如果您想要一個帶有活動鏈接的簡單文本，那么您應該使用div容器作為文本區域。textareaTextarea

反對回復 2022-09-29

翻過高山走不出你

TA貢獻1875條經驗獲得超3個贊

要清理 HTML，您需要將字符、、、和替換為其 HTML 實體，就像以下函數一樣：<>"'&

function sanitizeHTML(str){

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

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

});

}

然后，在代碼中，將對的調用替換為，您將獲得不會破壞代碼的清理輸出。data.emailbodysanitizeHTML(data.emailbody)

反對回復 2022-09-29

3 回答
0 關注
131 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

在構造動態 HTML 表單時清理腳本對象中的 HTML

在構造動態 HTML 表單時清理腳本對象中的 HTML

3 回答

添加回答