JSFiddle - React, Tailwind, and code Playground

by Neeraj Yadav

HTML

<select id="annoymize">
  <option>ED</option>
  <option>Area</option>
  <option>Teammember</option>
</select>

<div id="box">
  <span class="container">If the user clicks outside an element, drags onto it, and releases the button, this is still counted</span>

  <span class="container-alt">If the user clicks outside an element, drags onto it, and releases the button, this is still counted</span>
</div>

CSS

#box>span {
  color: #00f;
  outline: green dashed 1px;
  display: inline-block;
  width: 100%;
  height: 50px;
}

.container span[class^="highlight"] {
  background-color: orange;
}

.container-alt span[class^="highlight"] {
  background-color: yellow;
}

JavaScript

$("document").ready(() => {
  var $boxText = $("#box > span.container");
  var $boxTextAlt = $("#box > span.container-alt");
  let moved = false;
  var count = 0;
  const spanifyText = () => {
    var arr = [];
    var str = $boxText.text();
    for (var i = 0; i < str.length; i++) {
      arr.push(`<span class="${i}">${str.charAt(i)}</span>`);
    }

    $boxText.text("");
    $boxTextAlt.text("");
    $boxText.html(arr.join(""));
    $boxTextAlt.html(arr.join(""));
  }
  spanifyText();
  // select change
  var $select = $("#annoymize");
  $select.on("change", (e) => {
    const selectedVal = $select.find("option:selected").text();

    const elem = $(`.container-alt .highlight-${count-1}`);
    var oldText = elem.text();
    elem.text("");
    elem.text(`<${selectedVal}>`);
  });

  // grouping selected span
  const $span = $(".container > span");
  $span.on("mousedown", (e) => {
    moved = false;
    $(e.target).addClass(`selected-${count}`);
    $("#box").append("<span style='color:#00f;'>Mouse down.</span>");
  });

  $span.on("mousemove", (e) => {
    moved = true;
    $(e.target).addClass(`selected-${count}`);
  });

  $span.on("mouseup", (e) => {
    if (moved) {
      $(`.selected-${count}`).wrapAll(`<span class='highlight-${count}' />`);
      $("#box").append("<span style='color:#f00;'>Mouse up.</span>");
      count++;
      isSelectable = false;
      $boxTextAlt.html($boxText.html());
    }

  });
});