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

• 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 a friend, Reid:

• 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

Acknowledgments: Thanks, Reid S.