Question

我的目标是能够在文档中获取突出显示的文本，但仅当该文本在给定部分内时，然后在单击div标签后将特定样式应用于所选文本。我会解释我的意思：

因此，在查看window.getSelection()和document.selection.createRange().text后，我尝试将elmnt.getSelection()或elmnt.selection.createRange().text用于某些HTML元素elmnt。但是，它似乎没有用，所以这个想法似乎很无效。这意味着我不能使用这个想法来确定在给定位置内突出显示的文本。如果这没有意义，基本上，我想要看起来像这样的HTML代码：

<body>
  <div id="content">Stuff here will not be effected</div>
  <div id="highlightable">Stuff here can be effected when highlighted</div>
  <div id="morecontent">Stuff here will also not be effected</div>
</body>

因此，每当我突出显示文本时，单击指定的div将应用正确的CSS。

现在，转到div标签。基本上，这就是我对此的看法：

$('.colorpicker').click( function(e)
{
  console.log(getSelectedText());
}

最后，我希望这一切都突出显示所选文本，并让div标签将所选文本的颜色更改为我选择的相应div标记的颜色。这些似乎都没有正常工作，我对div标签的唯一猜测是，只要点击div标签，它就不会强调我选择的任何内容。

回退：

如果有多次在页面上找到'abc'，并且我突出显示为'abc'颜色，我希望只突出显示'abc'的副本。

我知道在一个问题上有很多问题，但即使我能够对这个想法有所了解，我的下一个个人项目也会顺利进行。谢谢。：）

Answer 1

解决方案的关键是使用代表浏览器中文本范围的对象，而不是选定的文本本身。查看FireFox Range和IE TextRange对象中可用的方法。这两种方法都包含用您自己的标记替换所选文本的方法（例如，包裹所选文本的范围。）

对于FF，请查看Range.getRangeAt（0）.surroundContents（element）
对于IE，请查看TextRange.pasteHTML（）

我必须警告你...如果你经历过这个问题，你可能最终会陷入一个可怕的浏览器怪癖之路。已经从一开始就为两个主要浏览器支持两个不同的对象。

使用javascript转换元素内的突出显示文本

1 个答案: