点击按钮选中表格<td>元素内部分文本的实现方案咨询

你可以用浏览器原生的Range和Selection API来实现普通DOM元素内的文本选中，这是替代setSelectionRange()（仅支持输入框类元素）的标准方案。

方案一：实现文本选中效果（类似鼠标拖选） #

直接选中目标文本片段，代码示例：

HTML结构

<table>
  <tr>
    <td id="targetTd">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </td>
  </tr>
</table>
<button onclick="highlightText()">高亮指定文本</button>

JavaScript逻辑

function highlightText() {
  const td = document.getElementById('targetTd');
  // 取<td>内的文本节点（如果<td>有嵌套元素，需要递归找对应文本节点）
  const textNode = td.firstChild;
  const targetText = "It has survived not only";
  const startPos = textNode.textContent.indexOf(targetText);

  if (startPos !== -1) {
    // 创建Range对象定位文本范围
    const range = document.createRange();
    range.setStart(textNode, startPos);
    range.setEnd(textNode, startPos + targetText.length);

    // 应用选中效果
    const selection = window.getSelection();
    selection.removeAllRanges(); // 清除之前的选中状态
    selection.addRange(range);
  }
}

方案二：实现背景高亮效果（类似标记文本） #

如果需要的是给文本加背景色的高亮，而不是选中状态，可以通过动态包裹<span>元素实现：

修改后的JavaScript逻辑

function highlightText() {
  const td = document.getElementById('targetTd');
  const targetText = "It has survived not only";
  const fullText = td.textContent;
  const startPos = fullText.indexOf(targetText);

  if (startPos !== -1) {
    // 先清除之前的高亮标记
    td.querySelectorAll('.text-highlight').forEach(el => {
      el.replaceWith(el.textContent);
    });

    // 拆分文本并包裹高亮部分
    const before = fullText.slice(0, startPos);
    const highlighted = fullText.slice(startPos, startPos + targetText.length);
    const after = fullText.slice(startPos + targetText.length);

    td.innerHTML = `${before}<span class="text-highlight">${highlighted}</span>${after}`;
  }
}

配套CSS

.text-highlight {
  background-color: #ffff00;
  padding: 2px 0;
}

注意事项 #

• 如果<td>内包含嵌套的HTML元素（比如<p>、<span>），需要先递归遍历子节点，找到目标文本所在的具体文本节点，再创建Range。
• 两种方案可以根据需求选择：选中效果是临时的（点击其他地方会消失），背景高亮是持久的（除非主动清除）。

内容的提问来源于stack exchange，提问作者Santhosh Jose