Created
February 26, 2014 16:04
-
-
Save airportyh/9232490 to your computer and use it in GitHub Desktop.
Results of pairing with Brookes on auto discovering and linking URLs in an editable div.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html> | |
| <head> | |
| </head> | |
| <div id="textarea" contenteditable="true"> | |
| Hello, World! | |
| </div> | |
| <button>Done</button> | |
| <script> | |
| textarea.addEventListener('keyup', function(e){ | |
| var range = document.createRange() | |
| range.collapse(true) | |
| range.setStart(textarea, 5) | |
| range.setEnd(textarea, 5) | |
| var sel = window.getSelection() | |
| sel.removeAllRanges() | |
| sel.addRange(range) | |
| //checkForUrls(textarea) | |
| }) | |
| var UrlRegex = /[-a-zA-Z0-9@:%_\+.~#?&//=]{2,256}\.[a-z]{2,4}\b(\/[-a-zA-Z0-9@:%_\+.~#?&//=]*)?/gi | |
| function checkForUrls(textarea){ | |
| var text = textarea.textContent | |
| var m = UrlRegex.exec(text) | |
| if (!!m){ | |
| var url = m[0] | |
| console.log('index:', m.index) | |
| var sel = window.getSelection() | |
| var range = sel.getRangeAt(0) | |
| console.log('URL found:', url) | |
| var newMarkup = text.substring(0, m.index) + | |
| '<a href="' + text.substr(m.index, url.length) + '">' + | |
| url + '</a>' + | |
| text.substring(m.index + url.length) | |
| if (range.startOffset > m.index + url.length){ | |
| textarea.innerHTML = newMarkup | |
| } | |
| } | |
| } | |
| </script> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment