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

December 30, 2018, at 10:10 PM

I have some code that receives a string (that might have an apostrophe or double quote in it). On receipt of the string, a link is created to allow the user to utilize the string in an input.

I have created a mockup jsfiddle here to demonstrate the problem in a simplified manner. In the real-world version it is much more complicated and the first input and use button don't exist - they are only in the fiddle to simulate the received string.

To test it, enter some text with an apostrophe in the "String with apostrophe" input and click the "Use" button. It will create a link after "Copied String" that says "Use filename". If you click that link, it should put the string into the second input. If there are no apostrophes it's fine, but apostrophes just won't work (you can see the error in the console: SyntaxError: "" string literal contains an unescaped line break).

If I rewrite the $("#usespan").html() line and switch all the " to ', then the apostrophe works, but the double quote doesn't.

How can I get it to work for both " and '?


Jsfiddle code (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 code (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

You could use the third way of signifying a string - a backtick (`). This will also let you use template literals instead of your current string concatenation:

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

Note: this does not work in Internet Explorer. For a full list of browser support, see the CanIUse page.

Answer 2

Perhaps the best solution is to replace the single quote for \' after the input is received. So, you would be adding .replace(/'/g, '\'') to

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

I dont seem to be able to break this in IE11. Either that, or I've entirely misunderstood you!

        "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); 
String with apostrophe: <input id='myInput'/><button id='goBtn'>Use</button><br> 
Copied String: <span id='output1'></span><br> 
<input disabled id='output2'/>

HTML - Either browser or handlebars is removing / ignoring a &lt;table&gt;&lt;tr&gt;&lt;td&gt; tag

HTML - Either browser or handlebars is removing / ignoring a <table><tr><td> tag

I have a table class that I use to vertically centralise text in a span or divI am using Handlebars in Node to render several templates server side, I have used this method on several partials in my web project, with no problems

Multiprocessing function not writing to file or printing

Multiprocessing function not writing to file or printing

I'm working on a Raspberry Pi (3 B+) making a data collection device and I'm trying to spawn a process to record the data coming in and write it to a fileI have a function for the writing that works fine when I call it directly

centering a video and a input box using flexbox

centering a video and a input box using flexbox

I have a bit of a problem horizontally centering my video, input box and button in the center of the pageI've seen a few answers that say that I don't need flexbox and I've actually attempted to set my margin to auto(to center the content in the middle...

Spring Rest/Security : body in response is missing then status is 4** [on hold]

Spring Rest/Security : body in response is missing then status is 4** [on hold]

EDITED(SOLVED) : i was using chrome debugger to look network responses, but it was not showing http responsei was writed some tests and now i can see response is correctly returning