Category: jQuery

Javascript and the Apostrophe

This is not an apostrophe

If we’re writing articles and need an apostrophe, we usually use the sign on our keyboard, which looks like an apostrophe but it is not. Its the prime symbol. See the difference?

'

Does it matter? If you are into typography you would say of course!

But also as Javascript developers, we are concerned with this difference. Although its the prime symbol in programming languages it is used as single quote. So, a client of mine from France run recently into a problem with one of my scripts. Imagine the following situation. You have a couple of HTML elements which contain JSON data in its attributes in order to pass information to Javascript:

JSON uses the double quote to encapsulate keys and values like “name”. So I have to use the single quote to encapsulate the whole JSON string. the value “type d’offre” breaks this way. The attribute data-attr is now only

{"name":"type d

So by using the single quote as an apostrophe, we run into quite some problems here. Of course there would be some workarounds. I could encode this JSON string somehow and let Javascript decode it first before converting the string into a JSON object. But I’ve decided otherwise. If my client uses the single quote instead of the apostrophe in one of the input fields which lead to this JSON string, the single quote will be replaced by the intended sign:

jQuery( 'input' ).keyup( function(){
var val = jQuery( this ).val();
val = val.replace( /'/g, '’' );
jQuery( this ).val( val );
});

The script itself is in my case UTF8 encoded. I’ve tried the same with ANSI but this outputs hieroglyphs. So, my client gets what he actually wants: An apostrophe and my code is happy too.

Actually, if you have a look around, it’s interesting to see, how much confusion is out there on all this topic. What is a single quote, what an apostrophe and what is a minute sign but this is not the topic here. Even the blogs dedicated to typography show you different answers on the question wether the prime symbol on the keyboard is really a prime symbol or a single quote. If you think about it, this looks like a quite interesting and nerdy history to write, but… I just post some more links for you, where you will find more information:

The credit for the featured image today takes Trevor Coultart who made a picture of a picture where you won’t find an apostrophe.

Tweet Comment: Did you know, jQuery is able to…?

@prantor19 just twittered a list of useful jQuery Snippets for 2014:

Well, I’m not to sure about some of these snippets. Sometimes, I think, you should CSS like for example:
$('li:odd').css('background-color: #000');

I just don’t get it, why you cant just use CSS
li:nth-child(2n){background-color:#000;}

Well, there might be some reasons, why you have to use Javascript instead, but a Rocking Script as it says in the Title “Rocking and Useful jQuery Code Snippets For 2014”?

There are some others too, which would fit more into a title “Did you know, jQuery is able to…?“.

$('input [type="submit"]').attr('disabled', true);
Yes! With jQuery you can alter attributes!

Well really, what is so rocking about
var anchor = $('#anchor');
setTimeout(function() {
anchor.removeClass('current');
}, 3000);

???

So, despite the strange title, which really hasn’t proven for me, I do like this one:

$('img').error(function() {
$(this).attr('src', 'img/not_found.png');
});


$('img').load(function() {
console.log('images successfully loaded');
});

Its quite obvious, when you see it, but I haven’t thought about this possibility yet. Why should the load-function just work with window?? I will try this one for sure!

And this one here
$("p:not(:last-of-type)").after("
");

is quite nice to investigate further. As the jQuery Docs explain “Insert content, specified by the parameter, after each element in the set of matched elements”. So this piece of code puts a break between all &lt,p>-Tags, but not behing the last one, because :not(:last-of-type) I like this usage of the selectors and once again it shows the power of them.

Thanks for the Tweet!