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

Turn your sentence into a hyphenated string: hyphenator.hellotumo.com.

Some caveats:

  • Might not be great for browsers other than most advanced ones (I did all testing in latest Google Chrome);
  • On mobile Safari, the character counter doesn’t work;
  • 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, but I like playing with pure JS as I get to know the language.

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):

# regular expression help — especially the use of those handy brackets — from a friend, Reid:

# really cool stuff about attaching events, and trying to call functions with arguments with an event attachment:

# 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:

# contentEditable is fun (but didn’t use it):

Acknowledgments: Thanks, Reid S.