Возникли проблемы с передачей апострофов или двойных кавычек по кликабельной ссылке - PullRequest
Новая
       58

Возникли проблемы с передачей апострофов или двойных кавычек по кликабельной ссылке

0 голосов
/ 30 декабря 2018

У меня есть некоторый код, который получает строку (в которой может быть апостроф или двойная кавычка).После получения строки создается ссылка, позволяющая пользователю использовать строку во входных данных.

Я создал макет jsfiddle здесь , чтобы продемонстрировать проблему в упрощенном виде.В реальной версии это намного сложнее, и первая кнопка ввода и использования не существует - они только в скрипке для имитации полученной строки.

Чтобы проверить это, введите текст сапостроф в поле ввода «Строка с апострофом» и нажмите кнопку «Использовать».После «Скопированная строка» будет создана ссылка «Использовать имя файла».Если вы щелкнете эту ссылку, она должна поместить строку во второй вход.Если апострофов нет, это нормально, но апострофы просто не будут работать (вы можете увидеть ошибку в консоли: SyntaxError: "" string literal contains an unescaped line break).

Если я переписываю строку $("#usespan").html() и переключаю все " to ', тогда апостроф работает, а двойная кавычка - нет.

Как заставить его работать как для ", так и для '?

Спасибо!

Код 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;');
}

Ответы [ 3 ]

0 голосов
/ 30 декабря 2018

Возможно, лучшее решение - заменить одинарную кавычку на \' после получения ввода.Итак, вы бы добавили .replace(/'/g, '\'') к 

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

Как работать со строками в JavaScript: Синтаксис \ 'всегда будет заключаться в одну кавычку ...

0 голосов
/ 30 декабря 2018

Кажется, я не могу сломать это в 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'/>
0 голосов
/ 30 декабря 2018

Вы можете использовать третий способ обозначения строки - обратный удар (`).Это также позволит вам использовать шаблонные литералы вместо текущей конкатенации строк: 

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

Примечание: это не работает в Internet Explorer.Полный список поддерживаемых браузеров см. На странице CanIUse .

.
...