Javascript Highlighter to Form (or whatever)

John Stewart asked if I had any easy ways to allow users to highlight some text and push that highlighted text to a form. I didn’t but that sounded like something useful in a variety of scenarios so I sketched out a working demo in Codepen which you can see below. It can push the content directly to a form field on the page but I also built a link that would populate to include the highlighted text as a URL parameter and grab the page URL as well.

Like most things I make, it’s the result of some Stack Overflow responses being hit several times with a hammer. It’s decently commented up but is not the most optimized of code.

This type of construction usually results in new ideas being incorporated on the fly and that makes for ugly code. I am ok with that as this prototype took about 15 minutes to create. We can polish things up if/when we have a more direct audience/intent. Until then, it’s a functional prototype which can be used to get faculty seeing possibilities.

See the Pen highlight to field by Tom (@twwoodward) on CodePen.

Comments on this post

  1. Cog.Dog said on May 16, 2018 at 10:19 am

    Imagine what you could do in an hour 😉 I’ve been using a simple JavaScript since the mid 2000s for grabbing the content of a selected text and pushing to a URL. e.g. a tool I made to build a JS bookmarklet tool for any WordPress blog

    I like the visual highlight bit, that’s a nice touch,

    • Tom Woodward said on May 16, 2018 at 12:05 pm

      That’s right! I remember that one. I need to think more about bookmarklets. I forget they’re often just js.