JavaScript中的转义引号

我正在从数据库中输出值(它并不是真正对公众开放，但它对公司的用户开放——这意味着，我不担心XSS)。

我试图输出一个这样的标签:

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

DESCRIPTION实际上是一个来自数据库的值，它是这样的:

Prelim Assess "Mini" Report

我试过用“\”替换“，但无论我怎么尝试，Firefox总是在单词评估后的空格后切断我的JavaScript调用，这导致了各种各样的问题。

我肯定错过了那个显而易见的答案，但我怎么也想不出来。

有人想指出我的愚蠢吗?

这里是整个HTML页面(它最终将是一个ASP。网页面，但为了解决这个问题，我拿出了除问题代码以外的所有其他内容)

<html>
<body>
<a href="#" onclick="DoEdit('Preliminary Assessment \"Mini\"'); return false;">edit</a>
</body>
</html>
554542 次浏览
小开
最佳答案

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

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

小开

我已经使用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中都有效。

小开

问题是HTML不识别转义字符。您可以通过对HTML属性使用单引号，对onclick使用双引号来解决这个问题。

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

应该能行。

小开

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

小开

朋友们，在JavaScript中已经有unescape函数，它为\"执行反转义:

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

如果你在Java中组装HTML，你可以使用这个来自Apache common -lang的实用工具类来正确地完成所有转义:

org.apache.commons.lang.StringEscapeUtils
escape和unescapes Java, Java Script, HTML, XML和SQL的字符串

小开

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

然而，如果你想让JavaScript代码在任何上下文中独立转义，你可以选择原生JavaScript编码:
'变成\x27
"变成\x22

所以你的onclick会变成:
DoEdit('Preliminary Assessment \x22Mini\x22');

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

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

小开

这就是我的方法，基本上是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>

小开

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

这将失败(由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>
小开

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

为了转义单引号，只需输入一个反斜杠，后面跟着一个单引号，如:\ '作为字符串的一部分。我在这个例子中使用了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.');
小开

可以使用escape()和unescape() jQuery方法。像下面,

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

小开

您可以复制这两个函数(下面列出)，并使用它们来转义/反转义所有引号和特殊字符。您不必使用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, '\\');
}

提交答案