簡體   English   中英

JavaScript 中的轉義引號

[英]Escape quotes in JavaScript

我正在從數據庫輸出值(它並不是真正對公眾開放,但它對公司的用戶開放——也就是說,我不擔心XSS )。

我正在嘗試輸出這樣的標簽:

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

描述實際上是數據庫中的一個值,如下所示:

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>

您需要將您寫出的字符串轉義到DoEdit以清除雙引號字符。 它們導致onclick HTML 屬性過早關閉。

在 HTML 上下文中使用 JavaScript 轉義字符\\是不夠的。 您需要用正確的 XML 實體表示替換雙引號, &quot; .

&quot; 由於 HTML 上下文,正如我之前建議的那樣,在這種特殊情況下會起作用。

但是,如果您希望針對任何上下文獨立轉義 JavaScript 代碼,您可以選擇原生 JavaScript 編碼:
'變成\\x27
"變成\\x22

所以你的 onclick 會變​​成:
DoEdit('Preliminary Assessment \\x22Mini\\x22');

例如,當將 JavaScript 字符串作為參數傳遞給另一個 JavaScript 方法時,這也將起作用( alert()是一個簡單的測試方法)。

我指的是重復的 Stack Overflow 問題,如何在 onClick 處理程序中轉義 JavaScript 代碼中的字符串? .

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

應該做的伎倆。

伙計們,JavaScript 中已經有unescape函數可以對\\"進行unescape

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

問題是 HTML 無法識別轉義字符。 您可以通過使用 HTML 屬性的單引號和 onclick 的雙引號來解決這個問題。

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

我就是這樣做的,基本上是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>

如果你在 Java 中組裝 HTML,你可以使用 Apache commons-lang 這個不錯的工具類來正確地完成所有的轉義:

org.apache.commons.lang.StringEscapeUtils
轉義和取消轉義 Java、Java Script、HTML、XML 和 SQL 的字符串。

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

請在下面的代碼中找到使用正則表達式將單引號作為輸入字符串的一部分進行轉義的代碼。 它驗證用戶輸入的字符串是否以逗號分隔,同時它甚至會轉義作為字符串一部分輸入的任何單引號。

為了轉義單引號,只需輸入一個反斜杠,后跟一個單引號,例如: \\'作為字符串的一部分。 我在這個例子中使用了 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.');

您可以復制這兩個函數(如下所列),並使用它們來轉義/取消轉義所有引號和特殊字符。 您不必為此使用 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, '\\');
}

也可以轉義空格。 在我看來,Firefox 假設三個參數而不是一個參數。 &nbsp; 是不間斷空格字符。 即使這不是問題的全部,它可能仍然是一個好主意。

您需要使用雙反斜杠轉義引號。

這失敗了(由 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>

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

使用escape(str); 使用unescape(str_esc);字符串並再次恢復unescape(str_esc); .

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM