When I wrote my first mumbling post, I discovered that in the current version of Ghost that I’m running, I couldn’t use Alt + (NumPad) 0151 to insert an em dash (—), as I’m writing on Windows. There’s also no built-in function in Ghost that would automatically replace two hyphens as an em dash, which is a very convenient function in Microsoft Word. As Ghost provides a very convenient Code Injection function, I thought I should be able to do that with a few lines of code and so in the future I can simply type two hyphens when I want an em dash. It did, and as I don’t know much about coding, this quest turned out be a few hours’ searching and trying, which is the reason why I’m recording this at 3:00 AM.

(Another distraction from my philosophical inquiry anyway… Shame.)

But, fortuantely, the quest turned out to be sucessful. Here is the working code to be put in Blog Footer:

<-- Replace two hyphens as an em dash -->
<script type="text/javascript">
    $('p').contents().filter(function() {
        return this.nodeType == 3
    }).each(function(){
        this.textContent = this.textContent.replace(/--/g,'—');
    });
</script>

And here is a live demo.¹

Notice, if you’re not using jQuery (for example, your active theme doesn’t use one), then you can simply put the following code in Blog Footer:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

Simply replace the link in the above code block with the one you need. I find cdnjs.com is the perfect place to find one.

The above code is a modification from this Stack Overflow answer. Many thanks to the original author.

What’s different from the original answer is that here in my code for my Ghost blog, I use $('p') to ‘call’ all the paragraphs <p> in a post, as it is pretty much the case I’m dealing with.

nodeType == 3, as explained in the original answer, is a text element.

.each() is a jQuery function, which, I don’t quite understand. But it seems to perform some kind of a looping function.

.replace(A, B) is then a function to replace A with B.

Now, at first, as dumb and ignorant as me, I just copy/paste the code and try it. What I used was this:

<-- Replace two hyphens as an em dash -->
<script type="text/javascript">
    $('p').contents().filter(function() {
        return this.nodeType == 3
    }).each(function(){
        this.textContent = this.textContent.replace('--','—');
    });
</script>

Which you can see the live demo here. You can notice that in the example, the second pair of hyphens are not replaced with em dash. In fact, only the first pair will be replaced, which suggest that the above code, with .replace('textA', 'textB') will only replace the first instance of textA–which I think has its usage in some cases, but not in my case when I only want em dash. Weirdly, the .each() is not working in the same way as I imagined–I don’t understand and know the whole thing in the first place anyway.

So I google ‘jQuery replace text not complete’, and I saw this webpage. I noticed that in the same .replace(), the author Sam Deering used /./g as what is to be replaced. I thought this has something to do with regular expression, and indeed it does, and /g is called a ‘modifier’. More to read here and here.

By the way, there’s another way to reliase the same effect by using .text, as shown in the following code modified from this Stack Overflow answer:

<script type="text/javascript">
    $("p").text(function () {
        return $(this).text().replace(/--/g, "—"); 
    });
</script>

However, when using bigfoot.js, or perhaps some other scripts, this code injection would render bigfoot.js ineffective. I suspect that it’s because when using .text() the script would also search two hyphens in the whole page, including the html code, which has the bigfoot.js loaded. As it turned out, some hyphens for syntax purposes are replaced, and so the bigfoot Javascript couldn’t be processed properly.

Anyway, this is an very interesting learning experience. I’m glad I achieved what I learnt. And I hope this post here would help anyone.

Last modified on 2018-05-16