Split text into separate cells onclick JS

Question

I have text input from the user that needs to split into table cells onclick.

Eg. For the sentence "The five boxing wizards jump quickly" in a table cell, I can click on the word "boxing" and the text will split into two cells with "The five" in one cell and "boxing wizards jump quickly" in another cell.

The user should be able to click "wizards" and "jump" and the sentence will be split into three cells, "The five boxing | wizards | jump quickly." Multiple clicks will mean multiple cells

Here is the code I have right now: (Splits into array, adds spans with unique id/index, and writes as innerHTML. When a word is clicked it logs the index/id of the specific word/span)

function pageText() {
    let pageText = "The five boxing wizards jump quickly";
    pageTextSection.innerHTML = "";

    let textArray = pageText.split(" "); 
    textArray.forEach((item, index) => {
        let line = ` <span class='sectionBreakSpan' id='${index}' onclick='splitSection(this.id)' >${item}</span> `;
        pageTextSection.innerHTML += line;
    })
}

function splitSection(index) {
    let arr = pageTwoTextSection.innerText.split(" ")
    console.log(index)  
}

<table>
  <tr class="pageTextRow">
    <td>
      <p id="pageTextSection"></p>
    </td>
 </tr>
</table>

This currently logs the index number of the clicked word. The first word is 0, second is 1... But I need the string to split on the clicked word and move to a new table cell. If I click on the word with index of 3, then 3 and on should be in the next cell.

Answer 1

I changed a bit logic to for split text.

hope it help you.

  const text = `The five boxing wizards jump quickly`;
  const arrayText = text.split(` `);
  const pageText = document.getElementById(`pageText`);
  const btn = document.getElementById(`btn`);
  const table = document.getElementById(`table`);

  arrayText.forEach((txt, index) => {
    pageText.insertAdjacentHTML(
      `beforeend`,
      `<span id=` + index + `>` + txt + `</span> `
    );
  });

  let slected = [];
  pageText.addEventListener("click", function (e) {
    const id = e.target.id;
    if (slected.includes(id)) {
      e.target.style.color = "black";
      slected = slected.filter((i) => i != id);
    } else {
      slected.push(id);
      e.target.style.color = "red";
    }
  });

  btn.addEventListener("click", function () {
    table.innerHTML = "";
    slected.sort((a, b) => a - b);
    let firstIndex = 0;
    slected.forEach((item, index) => {
      let txt = arrayText.slice(firstIndex, item).join(" ");
      table.insertAdjacentHTML(`beforeend`, `<tr>` + txt + `</tr>`);
      firstIndex = item;
    });
    table.insertAdjacentHTML(
      `beforeend`,
      `<tr>` + arrayText.slice(firstIndex, text.length).join(" ") + `</tr>`
    );
  });

<div style="cursor: pointer" id="pageText"></div>
<button id="btn">Split</button>
<table id="table"></table>