jQuery：帶單引號的 td 內容在傳遞給模態時被切斷

Question

我有一個帶有動態 HTML 表格的頁面。 那里的一列稱為“ itemName ”，包含的文本也可以包含引號。

例子：

<td class='itemName'>Collector's Edition</td>

表格有一些按鈕可以創建模態並將一些表格內容即時傳遞給模態。

例子：

<input type='text' class='form-control' id='itemName' value='" + $(this).closest('tr').find('.itemName').text() + "' />

一切都按預期工作。 我唯一的問題是，每當 td 內容包含單引號時，傳遞給模態的文本就會被截斷，例如在上面的示例中，它只會通過收集器。

如何在 jQuery 中避免這種情況？

Answer 1

在嘗試了這個問題之后，我發現當你這樣做時：

$('span').after("<input type='text' value='"+$("span").text()+"'/>")

因為span的文本有單引號，所以它認為它是代碼的結束並在那里關閉。

但如果我們這樣寫，它就起作用了：

$('span').after('<input type="text" value="'+$("span").text()+'"/>')

小提琴樣品：

http://jsfiddle.net/arjpdkv1/1/

更新：

如果文本包含雙引號，那么此代碼也會失敗，更好的方法是通過這種方式創建元素而不是通過附加字符串 html，現在跨文本包含單引號或雙引號都沒有關系：

$('span').after($('<input/>').attr({
type: 'text',
value: $("span").text()
}));

演示小提琴

Answer 2

請用這個替換你的代碼。 它會轉義您的單引號字符，並且可以正常工作。

var html = "<input type='text' class='form-control' id='itemName' value='" +
    $(this).closest('tr').find('.itemName').text().replace("'","&#39;") + "' />";

JS小提琴