无法通过可点击的 link 传递撇号或双引号

Question

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

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

要测试它，请在 "String with apostrophe" 输入中输入一些带撇号的文本，然后单击 "Use" 按钮。它会在 "Copied String" 之后创建一个 link 表示 "Use filename"。如果单击 link，它应该将字符串放入第二个输入。如果没有撇号没关系，但撇号就是行不通（您可以在控制台中看到错误：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

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

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

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

Answer 2

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

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

How to Work with Strings in JavaScript: The syntax of \' will always be a single quote...

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'/>

无法通过可点击的 link 传递撇号或双引号

Having trouble passing an apostrophe or double quote through a clickable link

html

javascript

css

jquery

webpage