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.

1 thought on “JavaScript tool to turn a sentence into a hyphenated string of words”

  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/

    Reply

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.