복합 선택 범위

Question

사용자가 선택한 텍스트를 강조 표시하고 싶습니다. 나는 사용자 특정 하이라이트를 원하기 때문에 Highlight를위한 JQuery 기반 API를 사용할 수 없다.

내 코드는 다음과 같습니다.

var range = window.getSelection().getRangeAt(0); 
var sel = window.getSelection(); 
range.setStart(sel.anchorNode, sel.anchorOffset); 
range.setEnd(sel.focusNode,sel.focusOffset); 
highlightSpan = document.createElement("span"); 
highlightSpan.setAttribute("style","background-color: yellow; "); 
highlightSpan.appendChild(range.extractContents()); 
range.insertNode(highlightSpan)  

이 정상적인 상황에서 작동하지만 내가 다른 단락에서 텍스트를 선택하면 extractContents의 API는 HTML 반환 확인하고이를 유효 HTML 만들기 위해 추가 태그를 넣어 것입니다. javascript가 추가로 검증하지 않고 선택한 정확한 HTML을 원합니다.

이 작업을 수행 할 수있는 방법이 있습니까?

감사합니다, 티나

Answer 1

이 몇 번을왔다 :

는

How can I highlight the text of the DOM Range object? Javascript Highlight Selected Range Button

여기 내 대답 :

당신이 원하는 일을해야 다음과 같습니다. IE가 아닌 브라우저에서는 designMode를 켜고 배경색을 적용한 다음 designMode를 다시 끕니다.

function highlight(colour) { 
    var range, sel; 
    if (window.getSelection) { 
     // Non-IE case 
     sel = window.getSelection(); 
     if (sel.getRangeAt) { 
      range = sel.getRangeAt(0); 
     } 
     document.designMode = "on"; 
     if (range) { 
      sel.removeAllRanges(); 
      sel.addRange(range); 
     } 
     // Use HiliteColor since some browsers apply BackColor to the whole block 
     if (!document.execCommand("HiliteColor", false, colour)) { 
      document.execCommand("BackColor", false, colour); 
     } 
     document.designMode = "off"; 
    } else if (document.selection && document.selection.createRange) { 
     // IE case 
     range = document.selection.createRange(); 
     range.execCommand("BackColor", false, colour); 
    } 
}