JavaScript中的转义引号

211

我正在从数据库中输出值（它实际上并不开放给公众进入，但是它对公司用户开放，这意味着我不担心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  quotes  escaping 
— 马特·道迪
source
3
最好使onclick事件附件不引人注意，并将所有数据库信息移到数据岛中。事情会变得更干净，当字符串转义错误时，您实际上会遇到某种语法错误。
— 贾斯汀·约翰逊
1
— 彼得·莫滕森
您还可以使用escape（“ string”）和unescape（“ string”）jQuery方法
— Abhiram '19

Answers:

212

您需要转义要写入的字符串，DoEdit以擦掉双引号字符。它们导致onclickHTML属性过早关闭。

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

— 亚伦
source
是的，不是吗？<a href="#" onclick="DoEdit('Preliminary Assessment \"Mini\"'); return false;">编辑</a>我尝试过，但仍在搞砸。这必须是一个简单的WTF，但对于我的一生，我看不到。
— 马特·道迪
是否有任何内置的JavaScript函数可以转义双引号？除了'quo“'。replace（'”'，''“），我什么都找不到。
— 凯文2010年
4
这不是一个JavaScript问题，而是一个HTML / XML编码问题：您不能在属性值中使用双引号字符，而不必对其进行转义...否则浏览器/解析器会认为您正在结束属性值声明。
— 亚伦
22
示例替换代码：'mystring'.replace(/"/g, '&quot;');
— Joshua Burns 2013年
3
在前面的评论中有一个额外的报价。起作用的代码是'mystring'.replace（/'/ g，'“”'）;
— 奥古斯丁·洛佩兹
95

&quot; 由于存在HTML上下文，因此可以像在我之前建议的那样在这种特殊情况下工作。

但是，如果你希望你的JavaScript代码能够独立逃过任何情况下，你可以选择本地JavaScript编码：
'变\x27
"变\x22

因此，您的onclick将变为：
DoEdit('Preliminary Assessment \x22Mini\x22');

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

我是指重复的堆栈溢出问题，如何在onClick处理程序中的JavaScript代码中转义字符串？。

— Tsemer
source
2
谢谢！您的答案是更正确的，因为它是本机JavaScript，与上下文无关。
— scarver2
2
这是正确的答案，尽管在HTML上下文中使用&quot;当然可以。
— 奥利弗
请注意，&quot;输入值是必需的，<input value="\x22quoted string\x22">即将不起作用。
— thdoan '18
@ 10basetom自然，JavaScript转义仅在JavaScript上下文中起作用，例如事件处理程序（onclick="..."）。a的值value属性不被一个JavaScript范围内进行处理，仅在一个HTML上下文。
— tsemer '18 -4-11
替换代码：'mystring'.replace(/"/g, '\\x22').replace(/'/g, '\\x27')
— 小鸡
33 
<html>
    <body>
        <a href="#" onclick="DoEdit('Preliminary Assessment &quot;Mini&quot;'); return false;">edit</a>
    </body>
</html>

应该做到的。

— 克里斯蒂安
source
12

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

<a href="#" onclick='DoEdit("Preliminary Assessment \"Mini\""); return false;'>edit</a>
— dl。
source
5
kes 我想知道为什么我过去自然选择使用'作为属性。我只是从来没有那么深入地研究过。谢谢。
— 马特·道迪
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\"
<span id="output"></span>
展开摘要

— 罗尼·罗斯顿
source
2

如果要用Java组装HTML，则可以使用Apache commons-lang中的这个不错的实用工具类来正确进行所有转义：

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

— 我拿
source
我使用org.apache.commons.lang3.StringEscapeUtils.escapeEcmaScript（text）在Java中构造methodExpression。谢谢。
— 哈伦
1

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

— 拉胡尔
source
5
当然可以，因为您没有将其直接放在属性中。要使用您的方法，我必须创建一个JS字符串数组，然后执行任意数量的$（“＃divxxx”）...分配。并非最佳，但感谢您的建议。
— 马特·道迪
1

您可以复制这两个函数（在下面列出），并使用它们对所有引号和特殊字符进行转义/转义。您不必为此使用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, '\\');
}
— 奥马诺软件
source
1

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

为了转义单引号，只需输入反斜杠，然后在字符串中输入单引号，例如：\'。在此示例中，我使用了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.');
— 迪内什·洛姆特（Dinesh Lomte）
source
0

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

— 汉普斯特
source
0

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

这失败了（由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>
— 水牛
source
0

您可以使用escape（）和unescape（）jQuery方法。像下面一样

使用escape(str);逃脱串并再次使用恢复unescape(str_esc);。

— 阿比拉姆
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.