JSFiddle - React, Tailwind, and code Playground

by profesor08

HTML

<h2>V1:</h2>
<div class="v1">
Ребят, нужна ваша помощь. Суть задание заключается в том, что бы при нажатии на слово в тексте оно добавлялось в keywords. Искал в инете, ничего толкового не нашел, может кто реализовывал такое или натолкните на мысль. Заранее спасибою
</div>

<h2>V2:</h2>
<div class="v2">
Ребят, нужна ваша помощь. Суть задание заключается в том, что бы при нажатии на слово в тексте оно добавлялось в keywords. Искал в инете, ничего толкового не нашел, может кто реализовывал такое или натолкните на мысль. Заранее спасибою
</div>

JavaScript

// V1

let div = document.querySelector(".v1");

div.addEventListener("click", function() {
	let text = this.innerText;
	let selection = window.getSelection();
	let charIndex = selection.focusOffset - 1;
  
  if (charIndex >= 0 && charIndex < text.length && text[charIndex].trim().length)
  {
  	let arr = text.split(/,?\s+/);
    
    for (let i = 0, char = 0; i < arr.length; i++)
    {
    	if (charIndex >= char && charIndex <= char + arr[i].length)
      {
      	alert(arr[i]);
      	break;
      }
    	char += arr[i].length;
    }
  }
});

// V2

let div2 = document.querySelector(".v2");

let arr = div2.innerText.split(" ");
div2.innerHTML = "";
  
for(let i = 0; i < arr.length; i++)
{
	let span = document.createElement("span");
	span.innerText = arr[i];
	span.addEventListener("click", function() {
  	alert(this.innerText);
    // твой код тут
  });
  
  div2.appendChild(span);
  div2.appendChild(document.createTextNode(" "));
}