通过Javascript选择HTML表格中的文本？答案

【问题标题】：Select text in HTML table via Javascript?通过Javascript选择HTML表格中的文本？
【发布时间】：2013-02-16 11:26:57
【问题描述】：

是否可以在 Javascript 的帮助下选择文本（就像用户将鼠标拖过浏览器中的 HTML 单词一样）？

我有一些 JS 代码在 HTML 表中搜索用户的字符串输入。然后，如果找到该词，我希望此代码选择/关注该词。

var targetTable = document.getElementById("accountTable");

for (var rowIndex = 1 + searchStart; rowIndex < targetTable.rows.length; rowIndex++)
{
    var rowData = '';
    rowData = targetTable.rows.item(rowIndex).cells.item(0).textContent;
    if (rowData.indexOf(str) != -1)
    {
                //select word and focus on it in user's browser?
    }
}

【问题讨论】：

您能否详细说明您想要发生的事情？
当然。想象一下，您正在网上冲浪并且想要复制一个单词。您首先必须用鼠标选择单词。这就是我想要的效果——我希望用户的输入字符串在 HTML 表格中被“选中”（或以某种方式突出显示）。
selectionStart/End 仅适用于可编辑文本（即使使只读会停止它的工作。如果从元素中获取文本并使用 CSS 样式围绕您想要显示为选中的文本。

标签： javascript google-chrome safari

【解决方案1】：

您可以将找到的字符串替换为相同的字符串，但在特定类的范围内。

例如，如果搜索词是“alpha”：

<td>The alphabet is long.</td>
<td>The <span class="highlighted">alpha</span>bet is long.</td>

当搜索发生变化时，您必须将所有突出显示的跨度恢复为纯文本。

如果您想实际使用浏览器选择进行选择，这里讨论了一种有限的方法：Programmatically select text in a contenteditable HTML element?

【讨论】：

【解决方案2】：

看起来您想使用Selection 对象。在基本级别上，您可以只设置其锚点和焦点节点和偏移量，也可以创建多范围选择。

【讨论】：

【解决方案3】：

要通过悬停突出显示元素，最简单的方法是使用 css。

例子：

你有html代码：

<p id="test">Word</p>

CSS 文件：

#word:hover{ color: #FFFF00; }

这将通过悬停元素为文本着色。

编辑，如果您有多个单词...您希望将它们分隔在每个单词的一个元素中。例如：

<text class="word">each</text><text class="word">word</text><text class="word">is</text><text class="word">selectable</text>  

.word:hover{ color: #FFFF00; }

这是 JS 小提琴：http://jsfiddle.net/braTe/

【讨论】：

谢谢，但我希望通过浏览器的选择功能以编程方式选择单词。