DOM Range 개체의 텍스트를 어떻게 강조 할 수 있습니까?

Question

나는 firefox에서 열린 html 페이지에서 마우스를 사용하여 텍스트를 선택하고 javascript 함수를 사용하여 선택한 텍스트에 해당하는 range 객체를 만들거나 가져옵니다.

userSelection =window.getSelection(); 
var rangeObject = getRangeObject(userSelection); 

지금 내가,

var span = document.createElement("span"); 
    rangeObject.surroundContents(span); 
    span.style.backgroundColor = "yellow"; 

음을 다음과 같이 그 일을하고있는 rangeobject.I에 해당되는 모든 텍스트를 강조하려면이 잘 만 rangeobject (시작점과 끝점)을 작동 같은 textnode에있다, 그것은 해당 text.Ex

<p>In this case,the text selected will be highlighted properly, 
     because the selected text lies under a single textnode</p> 

을 강조하지만 rangeobject 하나 이상의 textnode, 그것은 작동하지 않는 properlay을 포함하는 경우, 그것은 단지 텍스트를 강조하는 첫 번째 textnode에 rangeobject에 해당되는 예

<p><h3>In this case</h3>, only the text inside the header(h3) 
    will be highlighted, not any text outside the header</p> 

내가 할 수있는 방법 어떤 생각, 모든 텍스트를, 거짓말을하는 것은 범위가 단일 노드 또는 여러 노드에 있는지 관계없이 강조? 감사합니다 ....

Answer 1

또는 TextRange의 execCommand 메서드를 사용하는 것이 좋습니다.이 메서드는 이러한 용도로만 사용되지만 일반적으로 편집 가능한 문서에 사용됩니다. 다음은 비슷한 질문에 대한 답변입니다.

다음은 원하는대로해야합니다. IE가 아닌 브라우저에서는 designMode를 켜고 배경색을 적용한 다음 designMode를 다시 끕니다.

UPDATE

IE 9에서 작동하도록 고정

UPDATE 2013년 9월 12일

다음은이 방법에 의해 생성 강조 제거하는 방법 자세히 설명하는 링크입니다 :

을 https://stackoverflow.com/a/8106283/96100

function makeEditableAndHighlight(colour) { 
    var range, sel = window.getSelection(); 
    if (sel.rangeCount && 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"; 
} 

function highlight(colour) { 
    var range; 
    if (window.getSelection) { 
     // IE9 and non-IE 
     try { 
      if (!document.execCommand("BackColor", false, colour)) { 
       makeEditableAndHighlight(colour); 
      } 
     } catch (ex) { 
      makeEditableAndHighlight(colour) 
     } 
    } else if (document.selection && document.selection.createRange) { 
     // IE <= 8 case 
     range = document.selection.createRange(); 
     range.execCommand("BackColor", false, colour); 
    } 
} 

Answer 2

이 기능의 필요성을 자세히 설명해 주시겠습니까? ':: 선택'

추가 정보 : http://www.quirksmode.org/css/selection.html https://developer.mozilla.org/en/CSS/::selection

Answer 3

당신이 주변 범위에 대한 클래스를 추가하는 시도하고 적용 할 수 당신은 당신이 CSS 사용할 수있는 선택한 텍스트의 강조 스타일을 변경하려면 계층 적 CSS? CSS의 정의에서

var span = document.createElement("span"); 
span.className="selection"; 
rangeObject.surroundContents(span); 

,

span.selection, span.selection * { 
    background-color : yellow; 
} 

나는 그것을 시도하지 않았다. 그러나 그것이 작동 할 것이라고 추측합니다.

Answer 4

Rangy은 브라우저 간 범위 및 선택 라이브러리로이 문제를 완벽하게 해결합니다 (CSS Class Applier module).나는 다양한 데스크톱 브라우저와 iPad에서 강조 표시를 구현하는 데이 도구를 사용하고 있으며 완벽하게 작동합니다.

Tim Down의 답변은 훌륭하지만 Rangy는 모든 기능 감지 코드를 직접 작성하고 관리하지 않아도됩니다.