谷歌chrome -选择文本在HTML表通过Javascript

google chrome - Select text in HTML table via Javascript?

本文关键字：Javascript HTML chrome 选择 文本 谷歌      更新时间：2023-09-26

是否有可能在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?
    }
}

您可以将找到的字符串替换为具有特定类的span内的相同字符串。

例如，如果搜索词是"alpha":

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

当搜索改变时，你必须将所有突出显示的span恢复为纯文本。

如果你想使用浏览器选择，这里有一个有限的方法:编程选择文本在一个可内容的HTML元素?

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

为了通过悬停来突出显示元素，最简单的方法是使用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/

相关文章：