第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題，去搜搜看，總會(huì)有你想問(wèn)的

在構(gòu)造動(dòng)態(tài) HTML 表單時(shí)清理腳本對(duì)象中的 HTML

在構(gòu)造動(dòng)態(tài) HTML 表單時(shí)清理腳本對(duì)象中的 HTML

嗶嗶one 2022-09-29 17:56:25
我正在構(gòu)造一個(gè)動(dòng)態(tài)HTML表單，并用來(lái)自Javascript對(duì)象的數(shù)據(jù)預(yù)填充字段，如下所示：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接收數(shù)據(jù)對(duì)象，然后創(chuàng)建表單并預(yù)填寫(xiě)：document.getElementById("personalData").innerHTML = generatePersonalForm(resp);我的腳本對(duì)象有時(shí)包含HTML（這是正確和有意的！但是，如果它包含像“（雙引號(hào)）這樣的鏈接，則對(duì)象將破壞表單。data.emailbody<a href=\"http://www.example.com\">www.example.com</a>單引號(hào)也是如此。是否有任何選項(xiàng)可以在動(dòng)態(tài)添加的表單值字段中顯示HTML內(nèi)容？
查看完整描述

3 回答

?
夢(mèng)里花落0921

TA貢獻(xiàn)1772條經(jīng)驗(yàn) 獲得超6個(gè)贊

任何屬性值中任何未轉(zhuǎn)義的雙引號(hào)都將破壞代碼。


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


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

這將產(chǎn)生以下無(wú)效的HTML混亂：


<textarea value="this is an "example" with double quotes"></textarea>

為防止出現(xiàn)這種情況，您可以轉(zhuǎn)義所有雙引號(hào)：


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

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

這將產(chǎn)生這個(gè)有效的HTML：


<textarea value="this is an \"example\" with double quotes"></textarea>

更好的是，您可以從創(chuàng)建帶有字符串的HTML更改為直接創(chuàng)建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>


查看完整回答
反對(duì) 回復(fù) 2022-09-29
?
千萬(wàn)里不及你

TA貢獻(xiàn)1784條經(jīng)驗(yàn) 獲得超9個(gè)贊

不能在 中放置超鏈接。 僅用于處理文本。如果您想要一個(gè)帶有活動(dòng)鏈接的簡(jiǎn)單文本，那么您應(yīng)該使用div容器作為文本區(qū)域。textareaTextarea



查看完整回答
反對(duì) 回復(fù) 2022-09-29
?
翻過(guò)高山走不出你

TA貢獻(xiàn)1875條經(jīng)驗(yàn) 獲得超3個(gè)贊

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


function sanitizeHTML(str){

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

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

  });

}

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


查看完整回答
反對(duì) 回復(fù) 2022-09-29
  • 3 回答
  • 0 關(guān)注
  • 128 瀏覽
慕課專(zhuān)欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢(xún)優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)