Javascript 将类添加到所选文本，而不是所选文本的第一次出现

Question

我想用 javascript 向文本添加一个类(稍后将该字符串发送到 php)。每当我尝试这样做时，代码都会将类添加到我选择的第一次出现，而不是实际选择。请记住，我想将该精确选择发送到 php(并将其也放入数据库中，以便即使在刷新后它也保留该类)。

JQ

    $("#highlight").click(function(){
   paraval = $('#para').html();
   sel = window.getSelection();
   newst = '<a class="selectedText">' + sel + '</a>';
   newvalue = paraval.replace(sel, newst);
   $('#para').html(newvalue);
});

HTML

    <p>Will only highlight if text is selected from comment class div only</p>
<div class="comment" id="para" contenteditable="true">Here goes some text Here goes some text Here goes some text Here goes some text
Some other text</div>
<input type="button" value="Highlight" id="highlight"/>

CSS

 .selectedText{
    background-color:yellow;
}
.comment{
    border: solid 2px;
}

.comment::selection {
  background-color: yellow;
}

此处示例:http://jsfiddle.net/zq1dqu3o/3/

尝试选择单词“text”的最后一次出现。第一个将获得类“selectedText”...

谢谢

Answer 1

叫我懒惰，但如果你不介意 span 作为你的选择标记，你可以使用 rangy的 cssApplier 类。

var cssApplier;
$(document).ready(function() {
   rangy.init();
    cssApplier = rangy.createCssClassApplier(
                 "selectedText", {normalize: true,
                                 applyToEditableOnly:true});
});

$("#highlight").click(function(){
    if(cssApplier != undefined)
    {
        cssApplier.toggleSelection();        
    }
});

我在这里使用 applyToEditableOnly 来让它只在那个特定的 div 中工作。 (我不确定该特定设置的跨浏览器兼容性如何。虽然在 Chrome 和 Firefox 中工作。)这使用位置而不是选择文本来决定标记什么。

JS Fiddle 在这里:http://jsfiddle.net/zq1dqu3o/7/