How can I highlight a word/term quicker and smarter?
<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>