title: How can I highlight a word/term quicker and smarter?
body: <p>I have some text:</p>
  
  <pre><code>&lt;p class="drag"&gt;Hello world, Attack on Titan season two!&lt;/p&gt;
  </code></pre>
  
  <p>Currently, if a user wants to highlight a word/term with the cursor, they will click and drag, letter by letter. </p>
  
  <p>I want this process to be quicker. For example, if the user starts to highlight <code>At</code>, it should auto highlight the rest of the word, <code>Attack</code>. So the empty space is the divider. </p>
  
  <p>I am aware this is possible by dividing the words into divs, but I am hoping for a solution with pure text within one <code>&lt;p&gt;</code> tag.</p>