JavaScript 中的转义引号答案

【问题标题】：Escape quotes in JavaScriptJavaScript 中的转义引号
【发布时间】：2011-01-01 12:41:05
【问题描述】：

我正在从数据库中输出值（它并没有真正向公众开放，但它对公司的用户开放——也就是说，我不担心XSS）。

我正在尝试输出这样的标签：

<a href="" onclick="DoEdit('DESCRIPTION');">Click Me</a>

DESCRIPTION 实际上是来自数据库的一个值，类似于：

Prelim Assess "Mini" Report

我尝试将“替换为\”，但无论我尝试什么，Firefox 都会在 Assess 之后的空格后切断我的 JavaScript 调用，这会导致各种问题.

我一定错过了明显的答案，但我这辈子都想不通。

有人愿意指出我的愚蠢吗？

这是整个 HTML 页面（最终将是一个ASP.NET 页面，但为了解决这个问题，我取出了除问题代码之外的所有内容）

<html>
    <body>
        <a href="#" onclick="DoEdit('Preliminary Assessment \"Mini\"'); return false;">edit</a>
    </body>
</html>

【问题讨论】：

最好让您的onclick 事件附件不引人注目，并将您的所有数据库信息移动到一个数据岛中。事情会更干净，当您的字符串转义错误时，您实际上会遇到某种语法错误。
How do I escape a string inside JavaScript code inside an onClick handler? 可能重复。
也可以使用escape("string") 和unescape("string") jquery方法

标签： javascript quotes escaping

【解决方案1】：

您需要将您正在写入的字符串转义到DoEdit 以清除双引号字符。它们导致onclick HTML 属性过早关闭。

在 HTML 上下文中使用 JavaScript 转义字符 \ 是不够的。您需要将双引号替换为正确的 XML 实体表示，&quot;。

【讨论】：

对，但不是这样吗？ edit 我试过了，还是搞砸了。这必须是一个简单的 WTF，但对于我的生活，我看不到它。
是否有任何内置的 JavaScript 函数可以转义双引号？除了 'quo"'.replace('"', '"') 我什么都找不到。
这不是 javascript 问题，而是 HTML/XML 编码问题：您不能在属性值中使用双引号字符而不转义它们...否则浏览器/解析器会认为您重新结束属性值声明。
替换代码示例：'mystring'.replace(/"/g, '&quot;');
在前面的评论中有一个额外的引用。有效的代码是 'mystring'.replace(/'/g, '"');

【解决方案2】：

&quot; 在这种特殊情况下可以工作，正如我之前建议的那样，因为 HTML 上下文。

但是，如果您希望 JavaScript 代码在任何上下文中独立转义，您可以选择原生 JavaScript 编码：
' 变为 \x27
" 变为 \x22

所以你的点击会变成：
DoEdit('Preliminary Assessment \x22Mini\x22');

这也适用于例如将 JavaScript 字符串作为参数传递给另一个 JavaScript 方法（alert() 是一个简单的测试方法）。

我指的是重复的 Stack Overflow 问题，How do I escape a string inside JavaScript code inside an onClick handler?。

【讨论】：

谢谢！你的答案更正确，因为无论上下文如何，它都是原生 JavaScript。
这是正确的答案，尽管在 HTML 上下文中使用 &quot; 当然可以。
请注意，输入值中需要&quot;，即<input value="\x22quoted string\x22"> 不起作用。
@10basetom 自然地，JavaScript 转义只适用于 JavaScript 上下文，如事件处理程序 (onclick="...")。 value 属性的值不在 JavaScript 上下文中处理，仅在 HTML 上下文中处理。
替换码：'mystring'.replace(/"/g, '\\x22').replace(/'/g, '\\x27')

【解决方案3】：

<html>
    <body>
        <a href="#" onclick="DoEdit('Preliminary Assessment &quot;Mini&quot;'); return false;">edit</a>
    </body>
</html>

应该做的伎俩。

【讨论】：

【解决方案4】：

伙计们，JavaScript 中已经有 unescape 函数可以对 \" 进行转义：

<script type="text/javascript">
    var str="this is \"good\"";
    document.write(unescape(str))
</script>

【讨论】：

“escape”/“unescape”的组合满足了我的需求。谢谢。
转义/取消转义已弃用。尽管 encodeURI 不仅仅是引号。 gotochriswest.com/blog/2011/05/23/escape-unescape-deprecated

【解决方案5】：

问题在于 HTML 无法识别转义字符。您可以通过对 HTML 属性使用单引号和对 onclick 使用双引号来解决此问题。

<a href="#" onclick='DoEdit("Preliminary Assessment \"Mini\""); return false;'>edit</a>

【讨论】：

哎呀。我想知道为什么我过去自然而然地使用 ' 作为属性。我只是从来没有深入研究过它。谢谢。

【解决方案6】：

我就是这样做的，基本上是str.replace(/[\""]/g, '\\"')。

var display = document.getElementById('output');
var str = 'class="whatever-foo__input" id="node-key"';
display.innerHTML = str.replace(/[\""]/g, '\\"');

//will return class=\"whatever-foo__input\" id=\"node-key\"

&lt;span id="output"&gt;&lt;/span&gt;

【讨论】：

【解决方案7】：

如果你用 Java 组装 HTML，你可以使用 Apache commons-lang 这个不错的实用程序类来正确地进行所有转义：

org.apache.commons.lang.StringEscapeUtils
转义和非转义 Java、Java Script、HTML、XML 和 SQL 的字符串。

【讨论】：

我使用 org.apache.commons.lang3.StringEscapeUtils.escapeEcmaScript(text) 在 Java 中构造 methodExpression。谢谢。

【解决方案8】：

我已经使用 jQuery 做了一个示例

var descr = 'test"inside"outside';
$(function(){
   $("#div1").append('<a href="#" onclick="DoEdit(descr);">Click Me</a>');       
});

function DoEdit(desc)
{
    alert ( desc );
}

这适用于 Internet Explorer 和 Firefox。

【讨论】：

当然可以，因为您没有将其直接放在属性中。要使用您的方法，我必须创建一个 JS 字符串数组，然后执行任意数量的 $("#divxxx")... 分配。不太理想，但感谢您的建议。

【解决方案9】：

您可以复制这两个函数（如下所列），并使用它们来转义/取消转义所有引号和特殊字符。您不必为此使用 jQuery 或任何其他库。

function escape(s) {
    return ('' + s)
        .replace(/\\/g, '\\\\')
        .replace(/\t/g, '\\t')
        .replace(/\n/g, '\\n')
        .replace(/\u00A0/g, '\\u00A0')
        .replace(/&/g, '\\x26')
        .replace(/'/g, '\\x27')
        .replace(/"/g, '\\x22')
        .replace(/</g, '\\x3C')
        .replace(/>/g, '\\x3E');
}

function unescape(s) {
    s = ('' + s)
       .replace(/\\x3E/g, '>')
       .replace(/\\x3C/g, '<')
       .replace(/\\x22/g, '"')
       .replace(/\\x27/g, "'")
       .replace(/\\x26/g, '&')
       .replace(/\\u00A0/g, '\u00A0')
       .replace(/\\n/g, '\n')
       .replace(/\\t/g, '\t');

    return s.replace(/\\\\/g, '\\');
}

【讨论】：

不适合我。它无法逃脱双引号

【解决方案10】：

请在下面的代码中找到使用正则表达式将单引号作为输入字符串的一部分进行转义的代码。它验证用户输入的字符串是否以逗号分隔，同时它甚至会转义作为字符串一部分输入的任何单引号。

为了转义单引号，只需输入一个反斜杠，后跟一个单引号，例如：\' 作为字符串的一部分。我在这个例子中使用了 jQuery 验证器，你可以根据自己的方便使用。

有效字符串示例：

'你好'

'你好'，'世界'

'你好','世界',' '

“这是我的世界”、“没有我就无法享受这个世界。”、“欢迎您，客人”

HTML：

<tr>
    <td>
        <label class="control-label">
            String Field:
        </label>
        <div class="inner-addon right-addon">
            <input type="text" id="stringField"
                   name="stringField"
                   class="form-control"
                   autocomplete="off"
                   data-rule-required="true"
                   data-msg-required="Cannot be blank."
                   data-rule-commaSeparatedText="true"
                   data-msg-commaSeparatedText="Invalid comma separated value(s).">
        </div>
    </td>

JavaScript：

     /**
 *
 * @param {type} param1
 * @param {type} param2
 * @param {type} param3
 */
jQuery.validator.addMethod('commaSeparatedText', function(value, element) {

    if (value.length === 0) {
        return true;
    }
    var expression = new RegExp("^((')([^\'\\\\]*(?:\\\\.[^\'\\\\])*)[\\w\\s,\\.\\-_\\[\\]\\)\\(]+([^\'\\\\]*(?:\\\\.[^\'\\\\])*)('))(((,)|(,\\s))(')([^\'\\\\]*(?:\\\\.[^\'\\\\])*)[\\w\\s,\\.\\-_\\[\\]\\)\\(]+([^\'\\\\]*(?:\\\\.[^\'\\\\])*)('))*$");
    return expression.test(value);
}, 'Invalid comma separated string values.');

【讨论】：

【解决方案11】：

也可以转义空格。在我看来，Firefox 假设了三个参数而不是一个。 &nbsp; 是不间断的空格字符。即使这不是问题的全部，也可能是个好主意。

【讨论】：

【解决方案12】：

您需要使用双反斜杠转义引号。

这失败了（由 PHP 的 json_encode 产生）：

<script>
  var jsonString = '[{"key":"my \"value\" "}]';
  var parsedJson = JSON.parse(jsonString);
</script>

这行得通：

<script>
  var jsonString = '[{"key":"my \\"value\\" "}]';
  var parsedJson = JSON.parse(jsonString);
</script>

【讨论】：

【解决方案13】：

您可以使用 escape() 和 unescape() jQuery 方法。如下所示，

使用escape(str); 转义字符串并使用unescape(str_esc); 再次恢复。

【讨论】：