我想添加一个类（以后再将该字符串发送到php）到使用javascript的文本中。每当我尝试这样做时，代码都会将类添加到我选择的第一个匹配项中，而不是添加到实际选择中。请记住，我想将精确选择发送到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” ...
谢谢
叫我懒，但是如果您不介意跨度成为选择标记，则可以使用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/
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句