通过可点击链接传递撇号或双引号时遇到问题

Question

我有一些接收字符串的代码（其中可能有撇号或双引号）。收到字符串后，将创建一个链接以允许用户在输入中使用该字符串。

我创建了一个模型 jsfiddle here 以简化方式演示问题。在现实世界的版本中，它要复杂得多，并且不存在第一个输入和使用按钮 - 它们只是在小提琴中模拟接收到的字符串。

要对其进行测试，请在“带撇号的字符串”输入中输入一些带撇号的文本，然后单击“使用”按钮。它会在“复制的字符串”之后创建一个链接，上面写着“使用文件名”。如果单击该链接，它应该将字符串放入第二个输入中。如果没有撇号也没关系，但撇号不起作用（您可以在控制台中看到错误：SyntaxError: "" string literal contains an unescaped line break）。

如果我重写$("#usespan").html() 行并将所有" 切换为'，则撇号有效，但双引号无效。

我怎样才能让它同时适用于" 和'？

谢谢！

Jsfiddle 代码 (HTML)：

<p>String with apostrophe : <input id="fn"> <input type="button" value="Use" id="usefn"></p>

<p>Copied String: <span id="usespan"></span><br><br><input id="final">

Jsfiddle 代码（JS）：

$("#usefn").on("click", function() {
    var fn = $("#fn").val();
    fn = myHtmlEntities(fn);
    $("#usespan").html(' <a href="javascript:void(0)" onclick="$(\'#final\').val(\' '+fn+'\');">Use Filename</a>');
});

function myHtmlEntities(str) {
   return String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g,'&apos;');
}

Answer 1

也许最好的解决方案是在收到输入后替换\' 的单引号。因此，您将添加.replace(/'/g, '\'') 到

function myHtmlEntities(str) {
   return String(str).replace(/'/g, '\'').....
}

How to Work with Strings in JavaScript: \' 的语法总是单引号...

Answer 2

您可以使用第三种表示字符串的方式 - 反引号 (`)。这也将允许您使用 template literals 而不是当前的字符串连接：

$("#usespan").html(`<a href="javascript:void(0)" onclick="$('#final').val(${fn});">Use Filename</a>`);

注意：这在 Internet Explorer 中不起作用。如需浏览器支持的完整列表，请参阅CanIUse page。

Answer 3

我似乎无法在 IE11 中打破这一点。要么这样，要么我完全误解了你！

        "use strict";
        function byId(id){return document.getElementById(id)}
        function newEl(tag){return document.createElement(tag)}
        window.addEventListener('load', onWindowLoaded, false);

        function onWindowLoaded(evt)
        {
            byId('myInput').value = "\`whats wrong with this?\"!";
            byId('goBtn').addEventListener('click', onGoClicked, false);
        }

        function onGoClicked(evt)
        {
            byId('output1').innerHTML = '';
            var a = newEl('a');
//            a.innerHTML = "Use Filename";
            a.innerHTML = byId('myInput').value;
            a.href = "javascript:void(0)";
            a.setAttribute('data-text', byId('myInput').value);
            a.addEventListener('click', function(){byId('output2').value=this.getAttribute('data-text');}, false);
            byId('output1').appendChild(a);
        }

String with apostrophe: <input id='myInput'/><button id='goBtn'>Use</button><br>
Copied String: <span id='output1'></span><br>
<input disabled id='output2'/>