替换网页上的特定单词（仅一个单词实例，不是全部）答案

【问题标题】：Replacing a specific word on a web page (only one word instance, not all of them)替换网页上的特定单词（仅一个单词实例，不是全部）
【发布时间】：2016-10-27 15:30:54
【问题描述】：

我正在编写一个 Chrome 扩展程序，它在选定文本上使用上下文菜单单击处理程序来替换选定文本。基本上是换词。

上下文菜单处理程序接收选定的文本，但不接收其元素或 HTML。这意味着我无权访问用户单击的文本的特定实例，但我知道它是什么。

我可以在整个页面中搜索所选文本，但单词在网页中经常出现多次，我只想替换其中一个单词实例

例如，

<div id="One">
  This is a text
</div>
<div id="Two">
  This is another text
</div>

我需要区分 div One 上的“Text”一词被选中时的点击和 div 2 上的“Text”一词被选中时的点击。

有办法吗？

（下一个问题当然是区分同一个元素中的同一个词，但我不确定这是否可能）

【问题讨论】：

以您的 HTML 为例，这完全有帮助：document.querySelector('body').onclick = function clicked(event) { if (event.target.textContent.match(/text/)) { alert('text was found in ' + event.target.id); } }
您尝试过使用Document.querySelector() - innerHTML 吗？此属性提供了一种完全替换元素内容的简单方法。以下是有关更多信息的文档：developer.mozilla.org/en-US/docs/Web/API/Element/querySelector
我最终通过鼠标点击获得了window.getSelection().focusNode。这是我找到的最可靠的方法。感谢您的帮助！

标签： javascript google-chrome google-chrome-extension

【解决方案1】：

我最终像这样使用window.getSelection()：

var selectedNode = $(window.getSelection().focusNode);
var textToReplace = window.getSelection().toString();

var replaced = selectedNode.html().replace(textToReplace, newText);
selectedNode.html(replaced);

我需要在每次点击时获得选择，所以我注册了点击事件：

$(document).ready(function() { 
    $(document).click(function clicked(event) {
        RefreshSelection();
    });
});

【讨论】：