如何以编程方式转义引号？ [复制]答案

【问题标题】：How to programmatically escape quotes? [duplicate]如何以编程方式转义引号？ [复制]
【发布时间】：2014-06-30 12:18:53
【问题描述】：

这应该很简单，但我想不通。

我想让用户编辑一个值。为此，单击后，该值将变为文本框。但是，如果用户在文本框中的用户输入中加上引号，则文本框的value="" 属性会过早关闭，并且引号和它之后的任何内容都会丢失。转义（已弃用）和 encodeURI 只是用 asci 替换引号，这在文本框中看起来不太好。

感谢任何人对此问题的解决方案：

这里是javascript：

function editText() {
var text = document.getElementById('text').innerHTML;
var edittext = '<input type="text" size=60 name="name" id="name" value="'+text+'"><input type="button" value="Save" onclick="storeText(\'name\');">';
document.getElementById('text').innerHTML = edittext
return false;
}

html:

Text: <span id="text" onclick="editText()";>He said "that's cool"</span>

jsfiddle

http://jsfiddle.net/2s9v2/6/

更新：

与那些将其标记为重复的人所说的相反，重复的问题没有为我的问题提供答案。他们可能想重新阅读我的问题和所谓的重复，并在我的问题中精神上注册单词"programmatic"，并实际查看此处代码的重复相对中的代码......只是说。

我最终将文本框更改为文本区域作为一种解决方法，因为似乎没有一种直接的方法可以以编程方式在文本框中转义引号。

下面 Merlin 的答案是一种可能的方法，但调用第二个函数比仅用 textarea 替换 textbox 更复杂。无论如何，我无法让它发挥作用，但我感谢 Merlin 的回答并投了赞成票。

【问题讨论】：

只是不要使用.innerHTML，而是适当的东西……
您可以使用字符串替换将`\`添加到每个"，但出于安全原因，直接从用户输入构造 HTML 通常是个坏主意。跨度>
@Bergi 尝试了 .textContent 和同样的问题。 .value 未定义。你有什么建议？

标签： javascript escaping special-characters

【解决方案1】：

为什么不直接设置值而不是重建input？

document.getElementById('name').value = edittext

当然，这假设 input 元素和 id=name 已经存在于您的 DOM 中，但我看不出有什么特别的原因您不能确保它已经存在（直接用 HTML 编写或在 Javascript 上生成）页面加载）。

更新：似乎 OP 希望在 onClick 中动态创建元素，方法是将当前位于 div 中的文本转换为 input 字段div 的内容作为它的value。

假设id 应该是独一无二的，我相信以下方法可能会奏效。

function editText() {
var text = document.getElementById('text').innerHTML;
var edittext = '<input type="text" size=60 name="name" id="name" value="" /><input type="button" value="Save" onclick="storeText(\'name\');">';
document.getElementById('text').innerHTML = edittext;
document.getElementById('name').value = text;
document.getElementById('text').onclick = function() {}; //
return false;
}

请注意，您还需要在上述函数中禁用onClick，然后在storeText 中重新启用它，否则每次单击都会导致添加额外的按钮。

更新 2：这是一个没有参数传递的完整工作示例（为简单起见）。

<html>
<body>
<script>
function editText() {
    var text = document.getElementById('text').innerHTML;
    var edittext = '<input type="text" size=60 name="name" id="name" value="" /><input type="button" value="Save" onclick="storeText();">';
    document.getElementById('text').innerHTML = edittext;
    document.getElementById('name').value = text;
    document.getElementById('text').onclick = function() {}; 
    return false;
}
function storeText() {
    document.getElementById('text').innerHTML = document.getElementById('name').value;
    document.getElementById('text').onclick = "editText();";
}
</script>
<div id="text" onclick="editText();">HelloWorld</div>
</body>
</html>

【讨论】：

首先，用户点击值，露出输入框进行编辑。当编辑框中显示的值与该值不同时，会发生错误。你会在哪里添加这条线？
@user1904273，您需要给出一个更完整的示例来演示该问题。听起来您正在动态创建 input 元素并替换其他一些元素。如果是这种情况，那么您仍然可以先创建元素，然后使用我提供的解决方案。
@user1904273，我想我明白了，我更新了答案。让我知道这是否是您的意图。
我想没有办法以某种方式逃避引号。你说得对，这是缩写代码。此功能对整个页面执行多项任务，可以在单击时编辑字段（在完整版本中，它将字段名称作为输入）。所以我试图让它尽可能简单......添加了 jsfiddle 以最简单的形式说明问题。
@user1904273，您可以使用字符串替换将`\`添加到每个"，但从用户输入构造HTML通常是个坏主意。

【解决方案2】：

试试：text.replace(/"/g,"&quot;")

不过，理想情况下，您应该使用createElement 创建元素，此时您可以使用elem.value = text 而无需转义。

【讨论】：

我认为这将显示 "在输入框中...
@user1904273 它对我有用。 Demo