JavaScript tool to turn a sentence into a hyphenated string of words

Update: Jan. 21, 2015
With some help from Reid Simonton, Hyphenator is working better than ever. And now you can transform headlines into hyphenated url strings by going to hellotumo.com/h/. (It used to be at hellotumo.com/hyphenator/.)

This one comes with a few caveats:
1) Might not be great for browsers other than most advanced ones (I did all testing in latest Google Chrome);
2) On mobile Safari, the character counter doesn’t work;
3) There is a bug if you mess around too much with selecting/deselecting/pasting text into the box area containing the hyphenated headline.

I suspect many of these problems are fixable by using jQuery. I like playing with pure JS as I get to know the language (and get to know programming).

I’ve dropped some notes into the main.js file on what I learned making this better, but here they are for easier access:

# using .focus() to compare to document.activeElement (but I ended up not using it)
* https://developer.mozilla.org/en-US/docs/Web/API/document.activeElement
* https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.focus

# regular expression help — especially the use of those handy brackets — from Reid
* https://plus.google.com/u/0/101114332268546148921/posts
* his example: http://jsfiddle.net/vsjmm2us/
* more on regex: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions

# really cool stuff about attaching events, and trying to call functions with arguments with an event attachment
* 2 elegant ways to do so: http://toddmotto.com/avoiding-anonymous-javascript-functions/
* found it via http://stackoverflow.com/questions/10335343/javascript-attaching-events

# wonderful, simply way, using onkeyup, to make a live counter for number of characters. onkeyup was the trick, I believe. (I was using onkeydown and onkeypress.) Sample uses jQuery but I used straight JavaScript.
* http://jsfiddle.net/hNn5b/
* http://stackoverflow.com/questions/9767521/count-and-display-number-of-characters-in-a-textbox-using-javascript

# contentEditable is fun (but didn’t use it)
* https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.contentEditable
* but apparently also terrible: https://medium.com/medium-eng/why-contenteditable-is-terrible-122d8a40e480


Older parts of this post below:
For all of you Web wranglers who need to generate clean, hyphenated versions of headlines, I made a tool using JavaScript that does just that: the Hyphenator.

For example, “Special report: The cow eats grass, barley on the Goddess Moon,” will be turned into special-report-the-cow-eats-grass-barley-on-the-goddess-moon.

I’m still working on refining the .js and improving its ability to accommodate the different ways people might input the original text. I made this to help out when I need to alter a headline and URL in Plone, the CMS I use for my job, as it lacked WordPress’s ability to automatically handle this.

1 Comment

  1. I’ve been lurking my way through your JavaScript posts, I didn’t know you were doing stuff like this! Awesome. You’re writing some very clean, semantic JS (yes I’ve been looking at the source :). For this one a suggestion – regular expressions (which you’re already using to an extent) can really save you some keystrokes by not having to specify each and every character you want to filter out. After all, the characters you want to keep are a small and predictable set: alphanumeric and whitespace. So instead of “filter each of these specific characters out”, you do “filter out anything that’s not in the set of characters I want left behind”. Here’s an example: http://jsfiddle.net/vsjmm2us/

Leave a Comment

Your email address will not be published. Required fields are marked *

 

%d bloggers like this: