Replace words that are have been clicked in text of content editable area field

HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1,minimal-ui" name="viewport">
<link rel="stylesheet" href="spelling.css">
</head>
<body>
<div class="container">
<div id="updating-indicator"></div><br>
<div class="sp-editor-wrapper">
  <!--DROPDOWNstyle="margin-left: 385px; margin-top: 68px"-->
  <div id="slp-dropdown" class="dropdown">
    <div class="word-list">
      <a onclick="changeTextNode('world')" class="item-word" href="#">world</a>
      <a onclick="changeTextNode('word')" class="item-word" href="#">word</a>
      <a onclick="changeTextNode('wood')" class="item-word" href="#">wood</a>
    </div>
  </div>
    <!-- <div id="underline-text" style="margin-left: 385px; margin-top: 30px" class="underline-text"></div> -->
    <!--DROPDOWN-->
<div id="sp-editor" contenteditable="true" autocomplete="off" autocorrect="off" autocapiatlise="off" spellcheck="false" class="sp-editor">
The Project Gutenberg eBook of Alice’s Adventures in Wonderland, by Lewis Carroll<br>
<br>
This eBook is for the use of anyone anywhere in the United States and
most other parts of the world at no cost and with almost no restrictions
whatsoever. You may copy it, give it away or re-use it under the terms
of the Project Gutenberg License included with this eBook or online at
www.gutenberg.org. If you are not located in the United States, you
will have to check the laws of the country where you are located before
using this eBook.
</div>
</div>
</div>
</body>
</html>

CSS

.sp-editor{
        overflow-y: scroll;
    }
    /* Style The Dropdown Button */
    .word {
        cursor: pointer;
    }

    .word.underline{
        border-bottom: 2px solid #3e8e41;
    }
    
    /* The container <div> - needed to position the dropdown content */
    .dropdown {
        position: absolute;
        display: none;
    }

    .underline-text{
        position: absolute;
        width: 160px;
        height: 30px;
        border-bottom: 2px solid #3e8e41;
        background-color: rgba(19, 180, 54, 0.2);
        z-index: -99;
    }
    
    /* Dropdown Content (Hidden by Default) */
    .word-list {
        display: cancle;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    }
    
    /* Links inside the dropdown */
    .word-list a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }
    
    /* Change color of dropdown links on hover */
    .word-list a:hover {
        background-color: #f1f1f1;
        cursor: pointer;
    }
    
    /* Show the dropdown menu on hover */
    .dropdown:hover .word-list {
        display: block;
    }

JavaScript

var editor = document.querySelector("#sp-editor");

var myrange;
$(".sp-editor").click(function (e) {
    var x = e.clientX - 30;
    var y = e.clientY - 26;
    $("#slp-dropdown").attr("style", "margin-left: " + x + "px; margin-top: " + y + "px");
    var selection = window.getSelection();
    if (!selection || selection.rangeCount < 1) return true;
    var range = selection.getRangeAt(0);
    var node = selection.anchorNode;
    var word_regexp = /^\w*$/;
    // Extend the range backward until it matches word beginning
    while ((range.startOffset > 0) && range.toString().match(word_regexp)) {
        range.setStart(node, (range.startOffset - 1));
    }
    // Restore the valid word match after overshooting
    if (!range.toString().match(word_regexp)) {
        range.setStart(node, range.startOffset + 1);
    }

    // Extend the range forward until it matches word ending
    while ((range.endOffset < node.length) && range.toString().match(word_regexp)) {
        range.setEnd(node, range.endOffset + 1);
    }
    // Restore the valid word match after overshooting
    if (!range.toString().match(word_regexp)) {
        range.setEnd(node, range.endOffset - 1);
    }
    var word = range.toString();
    checkClickedWord(word, range);
});

function changeTextNode(word) {
    myrange.deleteContents();
    myrange.insertNode(document.createTextNode(word));
    $("#slp-dropdown").hide();
}

function checkClickedWord(word, range) {
    if (word.length > 0) {
        $("#slp-dropdown").show();
        myrange = range;
    }
}