Ben Nadel
On User Experience (UX) Design, JavaScript, ColdFusion, Node.js, Life, and Love.
Ben Nadel at CFUNITED 2009 (Lansdowne, VA) with: Todd Rafferty
Ben Nadel at CFUNITED 2009 (Lansdowne, VA) with: Todd Rafferty@webRat )

Replacing Double-Dashes With Em Dashes While Typing In JavaScript

By Ben Nadel on

One of the little delighters that I see many applications baking into their user experience (UX) is the auto-injection of Em Dashes whenever the user enters two normal dashes (hyphens) in a row. The Em Dash is often used used in lieu of other punctuation marks, such as commas or parenthesis, in order to increase readability or to indicate strong pivots in the sentence. As a fun "code kata", I wanted to see if I could implement this auto-injection of Em Dashes using JavaScript.


 
 
 

 
 
 
 
 

Run this demo in my JavaScript Demos project on GitHub.

View this code in my JavaScript Demos project on GitHub.

Officially, when an Em Dash (or an En Dash) is used, it's supposed to butt-up against the words on either side of it. And, in fact, on some platforms, like Medium, the JavaScript controlling the page won't even let you add a space before or after an Em Dash. But, for this code kata, I'm not going to get that formal - I'll leave that as an exercise in measure for the user. In my implementation, I'm simply going to replace two dashes with an em dash.

Now, in my implementation, I've decided to perform the auto-injection at the moment the user requests the second dash (essentially canceling and replacing their keydown event). Other implementations may wait for a space to be entered before executing the replacement. There's no right or wrong approach here - this was just an arbitrary decision.

As a fun caveat to this experiment, I've decided to use event-delegation on the document, targeting any and all inputs that have the ".emdashify" class. And, to demonstrate said targeting, I've included both activated and non-activated inputs in my demo:

  • <!doctype html>
  • <html lang="en">
  • <head>
  • <meta charset="utf-8" />
  • <title>
  • Replacing Double-Dashes With Em Dashes While Typing In JavaScript
  • </title>
  •  
  • <link rel="stylesheet" type="text/css" href="./demo.css">
  • </head>
  • <body>
  •  
  • <h1>
  • Replacing Double-Dashes With Em Dashes While Typing In JavaScript
  • </h1>
  •  
  • <p>
  • In some of the following textareas, <strong>double-dashes</strong>
  • will be converted to <strong>em dashes</strong> as you type.
  • </p>
  •  
  • <textarea placeholder="Enabled..." class="input emdashify"></textarea>
  • <textarea placeholder="Enabled..." class="input emdashify"></textarea>
  • <textarea placeholder="Not enabled..." class="input"></textarea>
  •  
  • <script type="text/javascript">
  •  
  • var dash = "-";
  • var emdash = "—"; // Shift+Option+Hyphen
  •  
  • // Add our keydown event-handler. In this case, we're going to listen at the
  • // document level using event-delegation. Then, we'll activate our logic for
  • // inputs that contain the "emdashify" class token.
  • document.addEventListener( "keydown", handleKeydown, false );
  •  
  • // --------------------------------------------------------------------------- //
  • // --------------------------------------------------------------------------- //
  •  
  • // I handle the keydown event. If the event is for a DASH that is about to
  • // follow an existing DASH, then we will replace the double-DASH with an EMDASH.
  • function handleKeydown( event ) {
  •  
  • var target = event.target;
  •  
  • // We only care about the dash - ignore any other key events at this time.
  • if ( event.key !== dash ) {
  •  
  • return;
  •  
  • }
  •  
  • // If the target input does not contain the "emdashify" class, then we don't
  • // want to alter they keydown behavior.
  • if ( ! target.classList.contains( "emdashify" ) ) {
  •  
  • return;
  •  
  • }
  •  
  • // Get the current offset of the carrot / cursor. This represents the
  • // location of the keydown event BEFORE the impending character has been
  • // added to the input value.
  • var offset = target.selectionStart;
  •  
  • // If the character right before the impending dash is another dash, then we
  • // want to cancel the current keyboard event (such that the impending dash
  • // is not rendered) and replace the existing dash with the emdash.
  • // --
  • // NOTE: If the offset is currently 0 (zero), then the -1 will return
  • // undefined, which will fail the === appropriately.
  • if ( target.value[ offset - 1 ] === dash ) {
  •  
  • event.preventDefault();
  •  
  • // Calculate the substrings that come before and after the dash that
  • // we're about to replace.
  • var beforeDash = target.value.slice( 0, ( offset - 1 ) );
  • var afterDash = target.value.slice( offset );
  •  
  • // Replace the existing dash with the emdash.
  • target.value = ( beforeDash + emdash + afterDash );
  •  
  • // In order to prevent the cursor from jumping to the end of the input
  • // value after we've set it programmatically, we have to explicitly
  • // define the selection as staying in the same place that it was before.
  • target.selectionStart = offset;
  • target.selectionEnd = offset;
  •  
  • }
  •  
  • }
  •  
  • </script>
  •  
  • </body>
  • </html>

As you can see, the algorithm is such that when I detect a "-" key is about to be entered, I look to see if the existing character at the given selection-start is also a dash. If it is, I cancel the current keydown behavior (thereby preventing the requested "-" character from getting added to the input); and, I replace the existing dash with an em dash.

If we run this code and enter some double-dashes, we get the following output:


 
 
 

 
 Auto-replacing a double-dash with an Em Dash using JavaScript as the user interacts with an input. 
 
 
 

As you can see, the first two inputs, which have the "emdashify" class, successfully auto-replace the double-dash with an em dash. And, the third input, which is not "emdashified", allows double-dashes to be entered just as the user typed them.

One thing to keep in mind is that an input doesn't emit an "input" event when the value is changed programmatically. As such, if you override the value being entered, other handlers that are watching for "input" events won't see the change you added. This isn't a problem, per-say; it's just something to be aware of in the context of a larger application interface.

Anyway, this was just a fun little JavaScript experiment. I like the look and feel of an Em Dash. And, I like that a lot of applications are facilitating their use with these kind of auto-injection delighters. It's a good tool to have in the back of my toolbox.



Looking For A New Job?

Ooops, there are no jobs. Post one now for only $29 and own this real estate!

100% of job board revenue is donated to Kiva. Loans that change livesFind out more »

Reader Comments

@All,

After posting this, I got some great feedback from a few people at work:

Johannes Hoff suggested that I should include target.selectionEnd when slicing the text so that I remove any highlighted text, which would be more in line with the user's intent.

Don Abrams suggested that there should be a way to undo the auto-replacement in cases where a user actually does want to type --.

I'll let this marinate in the back of my mind and see what I can come up with.

Reply to this Comment

Post A Comment

You — Get Out Of My Dreams, Get Into My Comments
Live in the Now
Oops!
NEW: Some basic markdown formatting is now supported: bold, italic, blockquotes, lists, fenced code-blocks. Read more about markdown syntax »
Comment Etiquette: Please do not post spam. Please keep the comments on-topic. Please do not post unrelated questions or large chunks of code. And, above all, please be nice to each other - we're trying to have a good conversation here.