Tukukkk

;(function() {

  var position

  

  var elem = document.getElementById('ex')

  elem.addEventListener('click', renderClick)

  

  function renderClick(evt) {

    let textUntilCaret = this.textContent.substr(0, this.selectionStart)

    textUntilCaret = textUntilCaret.replace(/w+$/, '')

    

    let textFromCaret = this.textContent.substr(this.selectionStart)

    textFromCaret = textFromCaret.replace(/^w+/, '')

    

    this.selectionStart = textUntilCaret.length

    this.selectionEnd = this.textContent.length - textFromCaret.length

  }

  

  function startWordAtPosition() {

    

  }

  

})();

Click in the textarea and the whole word will be selected!<br>

<textarea name="" id="ex" cols="50" rows="10">Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque, officiis et reiciendis maxime ipsam doloribus quo inventore animi voluptatibus maiores eligendi, corrupti cum placeat nobis possimus exercitationem ratione aut. Explicabo deserunt eum natus id laudantium repellendus aliquam magni molestias et, nihil asperiores obcaecati dolores sapiente. Nisi fugiat, beatae possimus impedit dolore quos nihil illo mollitia at exercitationem quo dignissimos eum, dolorum, delectus vel error sunt placeat eos ut. Suscipit, architecto perferendis. Minus debitis optio ratione aperiam sapiente est blanditiis vero cum alias accusantium veniam, molestiae odit soluta esse sint dolore dignissimos culpa autem ullam molestias repudiandae ab vitae eligendi inventore! Inventore, quas perspiciatis cumque repellat distinctio odio facilis explicabo ab molestiae laboriosam illo est at excepturi, deleniti dolore eum impedit quam voluptates. Totam quasi veniam dolor omnis magni atque, ex minus officia at adipisci similique a soluta possimus vitae blanditiis minima. Odit sequi blanditiis nesciunt, nemo reprehenderit dignissimos voluptatum aut, ex saepe ipsa itaque nobis similique, expedita eum sapiente quibusdam inventore aliquam et. Enim consequuntur, ipsam possimus quia perferendis obcaecati similique laborum! Tempora minus, repellat repellendus itaque obcaecati optio autem ad velit blanditiis id quasi quia quaerat fuga at praesentium hic accusamus assumenda. Doloribus sit distinctio vitae nostrum quo maiores, aperiam eius exercitationem suscipit quod et explicabo. Alias, explicabo quidem? Ipsum, fugiat aliquam obcaecati ab tempore ducimus pariatur, itaque, consequuntur ea beatae consectetur. Modi ducimus perspiciatis asperiores atque neque iste, eligendi odio voluptatibus labore, dolorem, iusto ipsa hic rem facere. Tempora officia doloribus repellendus excepturi, eaque temporibus architecto non sequi cupiditate harum pariatur, alias quia beatae voluptatem quas, vel illo inventore eligendi deserunt cumque laudantium id nulla. Eos cum soluta magnam quam, aliquam facere accusantium quasi, minus doloremque adipisci incidunt debitis non tempore! Perspiciatis eius illum maiores nam laborum dicta repellendus similique incidunt, cum ut, aliquid eveniet? Voluptatum, doloremque et?</textarea>

console.clear();

;(function() {

  var position



  var elem = document.getElementById('ex')

  elem.addEventListener('click', renderClick)



  function renderClick(evt) {

    let caretPosition = getCaretPosition(evt.target);

    let caretNode = getCaretTextNode(evt);



    let textUntilCaret = caretNode.textContent.substr(0, caretPosition)

    textUntilCaret = textUntilCaret.replace(/w+$/, '')



    let textFromCaret = caretNode.textContent.substr(caretPosition)

    textFromCaret = textFromCaret.replace(/^w+/, '')



    selectRange(caretNode, textUntilCaret.length, caretNode.textContent.length - textFromCaret.length)

  }



  function selectRange(node, start, end) {

    // console.log(node, start, end)

    let range = document.createRange()

    range.selectNodeContents(node)

    range.setStart(node, start)

    range.setEnd(node, end)



    selection = window.getSelection();

    selection.removeAllRanges();

    selection.addRange(range);    

  }



  function getCaretTextNode(evt) {

    var range, textNode

    // standard

    if (document.caretPositionFromPoint) {

      range = document.caretPositionFromPoint(evt.pageX, evt.pageY);

      textNode = range.offsetNode;

      // WebKit

    } else if (document.caretRangeFromPoint) {

      range = document.caretRangeFromPoint(evt.pageX, evt.pageY);

      textNode = range.startContainer;

    } else if (document.body.createTextRange) {

      // range = document.body.createTextRange();

      // range.moveToPoint(evt.pageX, evt.pageY);

      // range.select();

      var sel = document.getSelection()

      textNode = sel.focusNode

    }

    return textNode;

  }



  function getCaretPosition(editableDiv) {

    var caretPos = 0,

        sel, range;

    if (window.getSelection) {

      sel = window.getSelection();

      if (sel.rangeCount) {

        range = sel.getRangeAt(0);

        if (range.commonAncestorContainer.parentNode == editableDiv) {

          caretPos = range.endOffset;

        }

      }

    } else if (document.selection && document.selection.createRange) {

      range = document.selection.createRange();

      if (range.parentElement() == editableDiv) {

        var tempEl = document.createElement("span");

        editableDiv.insertBefore(tempEl, editableDiv.firstChild);

        var tempRange = range.duplicate();

        tempRange.moveToElementText(tempEl);

        tempRange.setEndPoint("EndToEnd", range);

        caretPos = tempRange.text.length;

      }

    }

    return caretPos;

  }  





})();

<div contenteditable id="ex">Lorem   ipsum dolor <b>sit amet</b> consectetur <em>adipisicing</em> elit. Itaque, officiis et reiciendis maxime ipsam doloribus quo inventore animi voluptatibus maiores eligendi, corrupti cum placeat nobis possimus exercitationem ratione aut. Explicabo deserunt eum natus id laudantium repellendus <span>aliquam magni molestias et, nihil asperiores obcaecati dolores </span>sapiente. Nisi fugiat, beatae possimus impedit dolore quos nihil illo mollitia at exercitationem quo dignissimos eum, dolorum, delectus vel error sunt placeat eos ut.   Suscipit, <span>architecto perferendis</span>. Minus debitis optio ratione aperiam sapiente est blanditiis vero cum alias accusantium veniam, molestiae odit soluta esse sint dolore dignissimos culpa autem ullam molestias   repudiandae ab vitae eligendi inventore! Inventore, quas perspiciatis cumque repellat distinctio odio facilis explicabo ab molestiae laboriosam illo est at excepturi, deleniti dolore eum impedit quam voluptates. Totam quasi veniam   dolor omnis magni atque, ex minus officia at adipisci similique a soluta possimus vitae blanditiis minima. Odit sequi blanditiis nesciunt, nemo reprehenderit dignissimos voluptatum aut, ex saepe ipsa itaque nobis similique, expedita eum sapiente quibusdam inventore aliquam et. Enim consequuntur, ipsam possimus quia perferendis obcaecati similique laborum! Tempora minus, repellat repellendus itaque obcaecati optio autem ad velit blanditiis id quasi quia quaerat fuga at praesentium hic accusamus assumenda. Doloribus sit distinctio vitae nostrum quo maiores, aperiam eius exercitationem suscipit quod et explicabo. Alias, explicabo quidem? Ipsum, fugiat aliquam obcaecati ab tempore ducimus pariatur, itaque, consequuntur ea beatae consectetur. Modi ducimus perspiciatis asperiores atque neque iste, eligendi odio voluptatibus labore, dolorem, iusto ipsa hic rem facere. Tempora officia doloribus repellendus excepturi, eaque temporibus architecto non sequi cupiditate harum pariatur, alias quia beatae voluptatem quas, vel illo inventore eligendi deserunt cumque laudantium id nulla. Eos cum soluta magnam quam, aliquam facere accusantium quasi, minus doloremque adipisci incidunt debitis non tempore! Perspiciatis eius illum maiores nam laborum dicta repellendus similique incidunt, cum ut, aliquid eveniet? Voluptatum, doloremque et?</div>