JavaScript 中的转义引号

Escape quotes in JavaScript

提问人:Matt Dawdy 提问时间:1/5/2010 最后编辑:Peter MortensenMatt Dawdy 更新时间:2/29/2020 访问量:581745

问:

我正在从数据库输出值(它并没有真正对公众开放,但它对公司用户开放 - 这意味着,我不担心 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>
JavaScript 引号 转义

评论

3赞 Justin Johnson 1/5/2010
最好使事件附件不显眼,并将所有数据库信息移动到数据岛中。事情会更干净,当你的字符串转义错误时,你实际上会得到某种语法错误。onclick
1赞 Peter Mortensen 5/5/2015
如何对 onClick 处理程序内的 JavaScript 代码中的字符串进行转义?的可能重复。
0赞 Abhiram 4/5/2019
您还可以使用 escape(“string”) 和 unescape(“string”) jquery 方法

答:

242赞 Aaron 1/5/2010 #1

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

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

评论

1赞 Matt Dawdy 1/5/2010
是的,但那不是这样吗?<a href=“#” onclick=“DoEdit('初步评估\”迷你\“');返回 false;”>编辑</a>我试过了,它仍然搞砸了。这一定是一个简单的WTF,但对于我的生活来说,我看不到它。
0赞 kevin 8/18/2010
是否有任何内置的 JavaScript 函数可以转义双引号?除了 'quo“'.replace('”', '“')我什么都找不到。
4赞 Aaron 8/21/2010
这不是 javascript 问题,而是 HTML/XML 编码问题:您不能在属性值中使用双引号字符而不转义它们......否则,浏览器/解析器会认为您正在结束属性值声明。
30赞 Joshua Burns 3/29/2013
替换代码示例:'mystring'.replace(/"/g, '&quot;');
3赞 Agustin Lopez 1/13/2014
在上一条评论中,有一个额外的引号。有效的代码是 'mystring'.replace(/'/g, '“');
1赞 rahul 1/5/2010 #2

我使用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。

评论

5赞 Matt Dawdy 1/5/2010
当然可以,因为您没有直接将其放在属性中。要使用您的方法,我必须创建一个 JS 字符串数组,然后执行任意数量的 $(“#divxxx”)...作业。不是最佳选择,但感谢您的建议。
13赞 dl. 1/5/2010 #3

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

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

评论

5赞 Matt Dawdy 1/5/2010
哎呀。我想知道为什么我过去自然而然地使用'作为属性。我只是从未深入研究过它。谢谢。
34赞 kristian 1/5/2010 #4
<html>
    <body>
        <a href="#" onclick="DoEdit('Preliminary Assessment &quot;Mini&quot;'); return false;">edit</a>
    </body>
</html>

应该可以解决问题。

0赞 the Hampster 1/5/2010 #5

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

28赞 rohtakdev 7/26/2011 #6

伙计们,JavaScript 中已经有函数可以执行以下非转义操作:unescape\"

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

评论

3赞 Luis R. 1/6/2012
“逃生”/“逃生”的组合满足了我的需求。谢谢。
11赞 chug2k 11/21/2012
已弃用 escape/unescape。尽管 encodeURI 不仅仅是引号。gotochriswest.com/blog/2011/05/23/escape-unescape-deprecated
2赞 iTake 1/4/2012 #7

如果你在 Java 中组装 HTML,你可以使用 Apache commons-lang 中的这个不错的实用程序类来正确完成所有转义:

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

评论

0赞 Harun 5/17/2017
我使用 org.apache.commons.lang3.StringEscapeUtils.escapeEcmaScript(text) 在 Java 中构造 methodExpression。谢谢。
114赞 tsemer 9/18/2012 #8

&quot;正如我之前所建议的那样,由于 HTML 上下文,在这种特殊情况下会起作用。

但是,如果您希望 JavaScript 代码在任何上下文中独立转义,则可以选择本机 JavaScript 编码:
becomes becomes
'\x27"\x22

因此,您的点击将变为:
DoEdit('Preliminary Assessment \x22Mini\x22');

例如,当将 JavaScript 字符串作为参数传递给另一个 JavaScript 方法时,这也行得通( 是一个简单的测试方法)。alert()

我向您推荐重复的 Stack Overflow 问题,如何在 onClick 处理程序内的 JavaScript 代码中转义字符串?

评论

2赞 scarver2 7/30/2013
谢谢!你的答案是更正确的,因为无论上下文如何,它都是原生 JavaScript。
2赞 Oliver 3/11/2014
这是正确的答案,尽管在 HTML 上下文中使用 will 当然是有效的。&quot;
0赞 thdoan 3/31/2018
请注意,输入值是必需的,即不起作用。&quot;<input value="\x22quoted string\x22">
0赞 tsemer 4/11/2018
@10basetom自然地,JavaScript 转义只适用于 JavaScript 上下文,如事件处理程序 ()。属性的值不会在 JavaScript 上下文中处理,而只会在 HTML 上下文中处理。onclick="..."value
1赞 chickens 5/2/2018
替换代码:'mystring'.replace(/"/g, '\\x22').replace(/'/g, '\\x27')
14赞 Ronnie Royston 5/31/2016 #9

基本上,我就是这样做的.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\"
<span id="output"></span>

0赞 Buffalo 3/22/2017 #10

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

这失败了(由 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>
2赞 Dinesh Lomte 4/3/2017 #11

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

为了对单引号进行转义,只需输入一个反斜杠,后跟一个单引号,例如:\' 作为字符串的一部分。在这个例子中,我使用了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.');
-2赞 Abhiram 4/5/2019 #12

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

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

评论

1赞 dearsina 8/25/2022
不建议使用该功能。改用 或。developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/......escape()encodeURI()encodeURIComponent()
1赞 omanosoft 6/25/2019 #13

您可以复制这两个函数(如下所列),并使用它们对所有引号和特殊字符进行转义/取消转义。您不必为此使用 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, '\\');
}

评论

0赞 CanCoder 4/4/2021
不适合我。它无法避免双引号