点击单词拆分文本至表格单元格的JavaScript实现问询

需要实现的功能：通过点击文本中的单词，将原表格单元格内的文本拆分到多个单元格中：

• 初始状态：单个单元格包含文本 "The five boxing wizards jump quickly"
• 点击单词"boxing"后，拆分为两个单元格："The five" 和 "boxing wizards jump quickly"
• 多次点击不同单词可实现多段拆分，比如依次点击"wizards"和"jump"后，最终拆分为三个单元格："The five boxing" | "wizards" | "jump quickly"

现有代码 #

HTML 代码 #

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

JavaScript 代码 #

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)  
}

当前问题 #

现有代码仅能打印点击单词的索引，未实现核心拆分逻辑：点击指定索引的单词时，需将该单词及后续所有内容移至新的表格单元格中（例如点击索引为3的单词，索引3及之后的内容要放入下一个单元格）。

解决方案代码 #

完整修改后代码 #

HTML

<table>
  <tr class="pageTextRow" id="textRow">
    <td>
      <p id="pageTextSection"></p>
    </td>
  </tr>
</table>
<script>
// 维护每个单元格对应的单词数组，方便拆分操作
let cellWordGroups = [];

function pageText() {
    const pageText = "The five boxing wizards jump quickly";
    const textArray = pageText.split(" ");
    // 初始化第一个单元格的单词组
    cellWordGroups = [textArray];
    renderCells();
}

function renderCells() {
    const textRow = document.getElementById("textRow");
    // 清空现有单元格
    textRow.innerHTML = "";
    
    cellWordGroups.forEach((wordGroup, groupIndex) => {
        const td = document.createElement("td");
        const p = document.createElement("p");
        
        // 为每个单词创建可点击的span，绑定点击事件并传递所在组索引和单词索引
        wordGroup.forEach((word, wordIndex) => {
            const span = document.createElement("span");
            span.className = "sectionBreakSpan";
            span.textContent = ` ${word} `;
            span.onclick = () => splitSection(groupIndex, wordIndex);
            p.appendChild(span);
        });
        
        td.appendChild(p);
        textRow.appendChild(td);
    });
}

function splitSection(groupIndex, wordIndex) {
    // 获取当前要拆分的单词组
    const targetGroup = cellWordGroups[groupIndex];
    if (wordIndex === 0) return; // 点击第一个单词不拆分（避免空单元格）
    
    // 拆分单词组：前半部分保留原组，后半部分作为新组
    const newGroup = targetGroup.splice(wordIndex);
    // 插入新组到原组的下一个位置
    cellWordGroups.splice(groupIndex + 1, 0, newGroup);
    
    // 重新渲染所有单元格
    renderCells();
}

// 页面加载时初始化
window.onload = pageText;
</script>

代码说明 #

1. 状态维护：用cellWordGroups数组存储每个单元格对应的单词数组，每次拆分直接操作该数组，避免从DOM文本中拆分导致的混乱
2. 渲染逻辑：renderCells函数根据cellWordGroups数组动态生成表格单元格，每个单词绑定点击事件并传递其所在的单元格索引和单词索引
3. 拆分逻辑：点击单词时，将对应单元格的单词数组拆分为前后两部分，更新cellWordGroups后重新渲染，实现多单元格拆分效果
4. 边界处理：跳过点击每个单元格的第一个单词，避免生成空单元格

内容的提问来源于stack exchange，提问作者Shira Zacks