[JQUERY] 자바 스크립트를 사용하여 선택한 텍스트의 변경 CSS

자바 스크립트를 사용하여 선택한 텍스트의 변경 CSS

해결법

1. ---

   1.이 작업을 수행하는 가장 쉬운 방법은 모든 최신 브라우저에서 배경색을 변경하는 명령을 가지고의 execCommand ()를 사용하는 것입니다.

   이 작업을 수행하는 가장 쉬운 방법은 모든 최신 브라우저에서 배경색을 변경하는 명령을 가지고의 execCommand ()를 사용하는 것입니다.

   다음은 여러 요소에 걸쳐 사람을 포함한 모든 선택에하고 싶은 일을해야한다. 이 designMode를 켭 비 IE 브라우저에서 배경 색상을 적용하고 다시 designMode를 on으로 꺼집니다.

   최신 정보

   IE 9가 수정되었습니다.

   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, sel;
       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);
       }
   }
   

2. ---

   2.여기가 일할 수있는 방법에 대한 원유 예입니다. 잭이 지적한대로 당신이 경우 선택 스팬 여러 요소를 인식해야합니다. 이것은 도움 get 및 아이디어에 뭔가가 흐르는 그대로 사용할 수 없습니다. 크롬에서 테스트.

   여기가 일할 수있는 방법에 대한 원유 예입니다. 잭이 지적한대로 당신이 경우 선택 스팬 여러 요소를 인식해야합니다. 이것은 도움 get 및 아이디어에 뭔가가 흐르는 그대로 사용할 수 없습니다. 크롬에서 테스트.

   var selection = window.getSelection();
   var text = selection.toString();
   var parent = $(selection.focusNode.parentElement);
   var oldHtml = parent.html();
   var newHtml = oldHtml.replace(text, "<span class='highlight'>"+text+"</span>");
   parent.html( newHtml );
   

3. ---

   3.MOZ 선택 의사 클래스 - 파이어 폭스에서는 ::을 사용할 수 있습니다. 웹킷에서는 :: 선택 의사 클래스를 사용할 수 있습니다.

   MOZ 선택 의사 클래스 - 파이어 폭스에서는 ::을 사용할 수 있습니다. 웹킷에서는 :: 선택 의사 클래스를 사용할 수 있습니다.

4. ---

   4.영구적으로 강조 스틱을 만들려면, 당신이 어떤 당신이 다음 스타일 속성을 첨부 할 수 있습니다 (스팬이해야 할) 새로운 DOM 요소의 선택을 포장해야 할 것 믿습니다. jQuery를 당신을 위해 그렇게 할 수 있을지 모르겠어요. 선택은 그래서 일반적인 경우에 새로운 요소의 전체 무리를 주입해야 할거야, 요소의 경계를 확장 할 수 있음을 명심하십시오

   영구적으로 강조 스틱을 만들려면, 당신이 어떤 당신이 다음 스타일 속성을 첨부 할 수 있습니다 (스팬이해야 할) 새로운 DOM 요소의 선택을 포장해야 할 것 믿습니다. jQuery를 당신을 위해 그렇게 할 수 있을지 모르겠어요. 선택은 그래서 일반적인 경우에 새로운 요소의 전체 무리를 주입해야 할거야, 요소의 경계를 확장 할 수 있음을 명심하십시오

5. ---

   5.내가 http://www.jsfiddle.net/hbwEE/3/에서 만든 작은 예에서보세요

   내가 http://www.jsfiddle.net/hbwEE/3/에서 만든 작은 예에서보세요

   그것은 여러 요소에 걸쳐 계정 선택을 고려하지 않습니다 .. (IE는 HTML을 조금 할 수 있지만 의지 엉망이됩니다 ..)

6. ---

   6.나는 팀의 대답처럼, 그것은 빠르고 깨끗하고 있습니다. 그러나 그것은 또한 하이라이트와 어떤 상호 작용을하는에 문을 종료합니다.

   나는 팀의 대답처럼, 그것은 빠르고 깨끗하고 있습니다. 그러나 그것은 또한 하이라이트와 어떤 상호 작용을하는에 문을 종료합니다.

   그들은 복잡한 상황에서 텍스트 흐름 및 엉망 일까지 당하고 나쁜 선택이 직접 주변의 텍스트를 인라인 요소입니다 삽입,

   나는 더러운 해킹이 제안 그래서

   이 크롬 확장은이 작업을 수행 할 수있는 방법의 예입니다.

   그것은 선택한 각 라인의 절대 레이아웃을 얻기 위해이 라이브러리의 API를 사용합니다.

from https://stackoverflow.com/questions/3223682/change-css-of-selected-text-using-javascript by cc-by-sa and MIT license