如何將HTML作為字符串傳遞給TextArea

Question

我正在嘗試獲取用戶使用屬性contenteditable="true"編輯的表，但是我不想在輸出中出現該表。

所以要輸出我正在這樣做：

$(document).ready(function() { 
  $("#btn").click(function(){
    var text = $("#tab").html(); // taking the content
    var res = text.replace('<td contenteditable="true">','<td>'); //trying to replace   
    document.getElementById("output").innerHTML = res ; //output data
  });
});

問題是代碼忽略了替換，您知道為什么嗎？

====編輯：

對不起，我認為我還不清楚。 唯一的問題是輸出，而不是html，我將html傳遞到文本區域，以供用戶復制等。

請在這里查看代碼： https : //jsfiddle.net/mnpxwhx6/

當我執行輸出時，我不希望TD攜帶可編輯屬性。

謝謝

Answer 1

如果正確解釋Question，則不需要.replace()嗎？ 如果要在td元素上刪除contenteditable屬性，則可以在設置textarea html之前克隆#tab元素，並使用.removeAttr()從td元素的html中刪除contenteditable 。

 textarea { width: 400px; height: 400px; }

 <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script> $(document).ready(function() { $("#btn").click(function() { var text = $("#tab").clone(); text.find("td[contenteditable]").each(function() { $(this).removeAttr("contenteditable") }) document.getElementById("output").innerHTML = text[0].innerHTML; }); delete text; }); </script> </head> <body> <div id="tab"> <table border=1> <thead> <tr> <td></td> <td contenteditable="true"> 48-50 </td> <td contenteditable="true"> 50-52 </td> <td contenteditable="true"> 52-54 </td> </tr> </thead> <tbody> <tr> <th>medida1</th> <td contenteditable="true"> 104cm </td> <td contenteditable="true"> 108cm </td> <td contenteditable="true"> 112cm </td> </tr> <tr> <th>medida2</th> <td contenteditable="true"> 106cm </td> <td contenteditable="true"> 110cm </td> <td contenteditable="true"> 114cm </td> </tr> <tr> <th>medida3</th> <td contenteditable="true"> 122cm </td> <td contenteditable="true"> 126cm </td> <td contenteditable="true"> 130cm </td> </tr> <tr> <th>medida4</th> <td contenteditable="true"> 69cm </td> <td contenteditable="true"> 70cm </td> <td contenteditable="true"> 71cm </td> </tr> <tr> <th>medida5</th> <td contenteditable="true"> 38cm </td> <td contenteditable="true"> 40cm </td> <td contenteditable="true"> 42cm </td> </tr> </tbody> </table> </div> <button id="btn">Show HTML</button> <hr> <textarea id="output" rows="4" cols="50"> </textarea>

jsfiddle https://jsfiddle.net/mnpxwhx6/1/

Answer 2

嘗試使用正則表達式替換字符串。

$(document).ready(function() { 
  $("#btn").click(function(){
    var text = $("#tab").html(); // taking the content
    var res = text.replace(/^.*<td.*contenteditable="true".*>$/gm,'<td>'); 
    $("#output").text(res) ; //output data
  });
});

工作演示

https://jsfiddle.net/mnpxwhx6/2/

Answer 3

看來您希望從<td>刪除contenteditable=true屬性。

那不是解決的辦法。 而是嘗試使用jQuery select by attribute選擇器選擇器來找到所需的TD並更改屬性：

$('table').find('[contenteditable=true]').attr('contenteditable','false');

jsFiddle演示

如何將HTML作為字符串傳遞給TextArea

問題描述

3 個解決方案

解決方案1
1 已采納 2016-03-25 20:49:33

解決方案2
1 2016-03-25 21:06:32

工作演示

解決方案3
0 2016-03-25 20:55:07

如何將HTML作為字符串傳遞給TextArea

問題描述

3 個解決方案

解決方案1 1 已采納 2016-03-25 20:49:33

解決方案2 1 2016-03-25 21:06:32

工作演示

解決方案3 0 2016-03-25 20:55:07

解決方案1
1 已采納 2016-03-25 20:49:33

解決方案2
1 2016-03-25 21:06:32

解決方案3
0 2016-03-25 20:55:07