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

你可以使用lastIndexOf（）获得最后一次出现并按以下步骤进行：

$("#highlight").click(function(){
  paraval = $('#para').text();
  sel = "text";
   var n = paraval.lastIndexOf(sel); 
   var before = paraval.substring(0,n);
  newst = before + '<a class="selectedText">' + sel + '</a>';
  newvalue = paraval.replace(paraval, newst);
  $('#para').html(newvalue);
 });

刚刚为它创造了一个小提琴：Replacing last occurence

注意：此快速示例仅起作用，因为您要突出显示的单词位于文本的最后位置，但您可以查看此解决方案是否适合您的请求。如果单词的最后一次出现在其他地方，只需创建一个变量＆＃34;＆＃34;包含最后一次出现的文字到最后。

刚刚在更新的小提琴中提供了一个示例：Replacing last occurence update

以下代码更新：

var after = paraval.substring(n + sel.length, paraval.length);
newst = before + '<a class="selectedText">' + sel + '</a>' + after;

Answer 2

叫我懒惰，但是如果你不介意跨度是你的选择标记标记，你可以使用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小提琴：http://jsfiddle.net/zq1dqu3o/7/

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

2 个答案: