擦除高亮JavaScript getSelection功能 [英] Erase the highlight JavaScript getSelection function

问题描述

突出显示不是问题。我的问题是，我怎么能在JavaScript中使用window.getSelection（）来擦除高亮。并创建一个节点新的跨度关闭和新的跨度打开来擦除选定的高亮区域。
$ b

 函数removeHighlight（sel）{
 
 if（sel.anchorNode.parentNode。 className =='hlt'）{
 var replacementText = sel.toString（）; 
 range = sel.getRangeAt（0）; 
 range.deleteContents（）; 
 range.insertNode（document.createTextNode（replacementText））; 
 
 
 $ / code> 

到目前为止，这是我的函数，但createTextNode（）可以阅读htmlEntities。

解决方案

要达到预期效果，请按照以下选项



1.从button中获取选定的文本 - 使用id切换切换

2.在选择元素之前添加close标签并使用子字符串添加class -'hlt'标签



HTML：



 < p> 
 Lorem ipsum dolor sit amet，cursus laoreet tincidunt vel，at purus sagittis ultrices< span class =hlt> varius elit accumsan，sed nulla aenean amet，nulla ac et，imperdiet< / span> fermentum nulla ipsum risus利奥。 
< / p> 
< button id =toggle>切换< /按钮> 
  

JS：

 < $ c $> $（document）.ready（function（）{
 $（＃toggle）。click（function（）{
 $（'span.hlt'）。removeClass（' hlt'）; 
 
 var selection = window.getSelection（）; 
 var text = selection.toString（）; 
 var parent = $（selection.focusNode.parentElement）; 
 var oldHtml = parent.html（）; 
 var position = oldHtml.indexOf（text）; 
 var end =（position * 1）+ selection.length 
 console.log （text.length）; 
 var output =< span class ='hlt'>+ oldHtml.substr（0，position）+< / span>+ text +< span class = 'hlt'>+ oldHtml.substr（position + text.length）+< / span>; 
 
 // var newHtml = oldHtml.replace（text，< / span> ;+ text +< span class ='hlt'>）; 
 parent.html（输出）; 
 
}）; 
}）; 
  

CSS：

  .hlt {
 background：yellow; 
} 
  

http://codepen.io/nagasai/pen/dXkZwP

highlight is not a problem. my problem is, on how can i erase the highlight using window.getSelection() in javascript. and create a node new span closing and new span opening to erase the selected highlight areas. See the screenShots.

function removeHighlight(sel) {

        if(sel.anchorNode.parentNode.className == 'hlt') {
            var replacementText = sel.toString();
            range = sel.getRangeAt(0);
            range.deleteContents();
            range.insertNode(document.createTextNode(replacementText));
        } 
    }

so far that is my function but createTextNode() can't read htmlEntities.

解决方案

To achieve your expected result , follow below option

1.Get selected text from button-Toggle using id- toggle
2.Add close tag before selection element and span tag with class -'hlt' using substring

HTML:

<p>
  Lorem ipsum dolor sit amet, cursus laoreet tincidunt vel, at purus sagittis ultrices <span class="hlt">varius elit accumsan, sed nulla aenean amet, nulla ac et, imperdiet </span>fermentum nulla ipsum risus leo.
</p>
<button id="toggle">Toggle</button>

JS:

$(document).ready(function() {
  $("#toggle").click(function() {
    $('span.hlt').removeClass('hlt');

    var selection = window.getSelection();
    var text = selection.toString();
    var parent = $(selection.focusNode.parentElement);
    var oldHtml = parent.html();
    var position = oldHtml.indexOf(text);
    var end =(position*1)+selection.length
    console.log(text.length);
    var output = "<span class='hlt'>" +oldHtml.substr(0, position) + "</span>"+text+"<span class='hlt'>" + oldHtml.substr(position+text.length)+ "</span>";

    //var newHtml = oldHtml.replace(text, "</span>" + text + "<span class='hlt'>");
    parent.html(output);

  });
});

CSS:

.hlt{
  background:yellow;
}

http://codepen.io/nagasai/pen/dXkZwP

这篇关于擦除高亮JavaScript getSelection功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！