转化使用JavaScript

我的目标是能够得到一个文档中突出显示的高亮显示文本的元素中的文本，但前提是该文本是一个给定的区间内，然后单击后应用某种风格到选定的文本div标记。我会解释我的意思：转化使用JavaScript

所以，说完看着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标签的唯一原因的猜测是，它无论unhighlights每当我点击div标签我有选择的。

回退：

如果有'abc'是在页面上发现，我强调上色'abc'超过一次，我想，只有'abc'该副本中突出显示。

我知道这是一个很大的问题，但即使我能在这个想法上取得一个小小的开端，我的下一个个人项目将会更加顺利。谢谢。 :)

来源

2010-04-12 ashays

解决这个问题的关键是使用代表浏览器中文本范围的对象，而不是选定的文本本身。看看在Firefox的范围和IE的TextRange对象都提供给您的方法。这两个包含有自己的标记替换所选文本的方式（例如跨度包裹你选定的文本。）

对于FF的外观到Range.getRangeAt（0）.surroundContents（元素）
对于IE看看TextRange.pasteHTML（）

我必须警告你，虽然...如果你经历了这一点，你可能会结束了一个可怕的浏览器怪癖路径。已经从一开始就需要支持两种不同的对象有两个主要的浏览器。

来源

2010-04-13 20:25:39 zincorp

转化使用JavaScript

回答

相关问题