Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>You've said that none of the solutions given so far have worked for you, but I think actually they're fine (at least some of them). Let me demonstrate:</p> <p>Here are the examples you listed:</p> <pre><code>$json: &lt;img src="img/map/"ST JOHN'S"_map.PNG"/ width="600"&gt; $html: &lt;img src="img/map/ST JOHN&amp;#039;S_map.PNG"/ width="600"&gt; $htmlent: &lt;img src="img/map/ST JOHN&amp;#039;s_map.PNG"/ width="600"&gt; $escape: &lt;img src="img/map/ST JOHN\'S_map.PNG"/ width="600"&gt; $urlenc: &lt;img src="img/map/ST%20JOHN%27S_map.PNG"/ width="600"&gt; </code></pre> <p>I don't see any problem with any of these (except the JSON one, which I'll explain in a moment).</p> <p>And I've just tried all these examples, trying to simulate your scenario as closely as possible (even down to using the same file name).... All of them loaded the graphic correctly, again except the JSON example.</p> <p>The JSON example needs a minor tweak to get it working, but it also does escape the string in a workable way. To get it working you need to take into account that JSON produces a fully-quoted Javasscript string rather than just escaping it as the others do, so you'd modify the output to close the quotes and add the strings together, like so:</p> <pre><code>$('#map_output').html('&lt;p&gt;&lt;img src="img/map/"+&lt;?=$json?&gt;+"_map.PNG"/ width="600"&gt;&lt;/p&gt;'); </code></pre> <p>The other solutions don't need this. They all work as is. As I say, I tried them, and they all loaded the graphic into the page.</p> <p>In the context, all three mechanisms (escaping <code>\'</code>, entities <code>&amp;#039</code> and URL encoding <code>%27</code>) are valid:</p> <ul> <li><p>Escaping works because you're in the context of Javascript, so the backslash gets dealt with by Javascript and the final generated HTML that gets inserted into the page won't contain it.</p></li> <li><p>Entities work because HTML translates entities into the mapped character, so <code>&amp;#039</code> in a HTML page is the same as a single quote, even within an attribute value as in this case.</p></li> <li><p>URL Encoding works because browsers translate them when they load a URL.</p></li> </ul> <p>I would suggest URL encoding is the correct solution in this case, since this is being used for a URL. The reason for that is that while all the solutions work for the given example, if you have any examples that contain a question mark or an ampersand (<code>&amp;</code>) or a few other reserved characters, then URL encoding will be the only solution that will work in these cases. On the other hand, if you're displaying the output in your HTML page in another context, then entities are the way to go. And if it is going to be used just within Javascript, then JSON is the answer.</p> <p>But you say none of them did the trick. My question is: Did you actually try them? Did you run the code and the graphic failed to load? It did for me. On the other hand, if they did work, but still don't "do the trick", then what is it you actually want?</p> <p>My guess is that what you actually mean is that you want to end up with a simple quote character there, but have it magically work. That can't happen; the quote has to be escaped somehow or other in order for it to work, but they user will never see the escaped version, so there's no need to worry about it.</p> <p>In fact, you should be escaping or encoding <em>all</em> the strings you input or output, so that invalid characters do work. Otherwise Mr O'Brien is going to have trouble entering his name into your site, and if he manages it, you'll have trouble displaying it afterward.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload