javascript Range object_javascript 기술에 일반적으로 사용되는 브라우저 간 작업

최근 온라인 코드 편집기를 개발하는 과정에서 Range 개체에 자주 노출되었습니다. 크로스 브라우저 요구 사항으로 인해 IE TextRange 개체와 표준 Dom Range 개체가 사용됩니다.

개발된 함수는 주로 인스턴트 코드 컬러링(CodeColoring)과 구문 힌트(CodeHints)를 포함합니다. 함수 개발 시 문제점을 요약하거나 소스 코드를 나중에 제공합니다.
다음은 Range 개체와 일반적인 작업에 대한 개인적인 이해의 예와 요약입니다.
Range 개체
Range 개체는 사용자가 선택한 영역을 드래그하는 등 문서의 연속적인 범위 영역을 나타냅니다. 브라우저 창에서 마우스를 사용합니다.
dom 표준 Range 객체
http://www.php.cn/
IE에서 TextRange 객체 사용
http://www.php.cn/
일반적으로 사용되는 범위 객체 생성 메소드
개발 중 위 문서의 표준 설정 메소드 외에도 대부분의
표준 돔은 다음과 같이 설정됩니다.
var range=window.getSelection().getRangeAt(0)
ie:
var range=document.selection.createRange();
참고: 표준 DOM은 창에서 선택 개체를 가져오는 반면 IE는 문서 개체에서 선택 개체를 가져옵니다.
표준 dom 범위 객체(이하 dom rang)와 즉, TextRange 객체(이하 TextRange)는 동작 모드에서 dom 범위가 dom 구조에 따라 제어된다고 할 수 있습니다. TextRange는 텍스트 노드 문자 섹션 컨트롤을 기반으로 합니다. 다음 예제를 읽으면 이 두 가지의 작동 모드를 더 잘 이해할 수 있습니다. 아래에 언급된 범위 객체는 html 구조(designMode=on contentEditable=true state)에서의 선택 및 변경 작업을 참조합니다. 텍스트 영역에서의 작업은 이보다 간단하며 현재 연구 환경은 아닙니다.
범위 객체의 구체적인 방법과 속성은 위에 나열된 관련 API 문서를 확인하세요. 다음은 실제 개발 과정에서 일반적인 기능에 대한 설명입니다
1. Region
TextRange의 영역 선택
TextRange 개체는 주로 다음 메서드를 사용하여 영역 선택을 제어합니다. moveStart moveEnd move
이 세 함수는 동일한 매개 변수 구문을 사용합니다. fn(sUnit [, iCount])
첫 번째 매개변수는 이동 단위를 의미하며, 사용 가능한 매개변수는 문자(문자), 단어(단어), 문장(문단), textedit(전체 편집 영역)
두 번째 매개변수는 이동 단위를 의미합니다. 이동합니다. 음수는 해당 위치 앞으로 이동하고, 양수는 해당 위치로 이동합니다.
실제 개발에서는 일반적으로 문자가 사용됩니다. 기타 여러 매개변수가 중국어 환경 및 HTML 편집에서 예상 위치에서 벗어납니다.
예제 1: TextRange는 커서 앞의 4개 문자를 선택합니다.

var rg=document.selection.createRange()
rg.moveStart("character",-4)
rg . select();//텍스트 영역을 명시적으로 선택하면 이 함수를 호출하지 않고도 선택한 내용을 가져올 수 있습니다
var text=rg.text;//선택한 텍스트 가져오기
var htmlText=rg.htmlText;/ / 선택한 텍스트의 html 코드 가져오기

rg.htmlText를 사용하여 선택한 텍스트의 html 코드를 가져오지만 결과가 만족스럽지 않습니다.
예: < b>aaaa bb, aabb 세그먼트를 선택하면 .htmlTex는 aabb 대신 aabb를 반환합니다.
일반적으로 사용되는 기타 위치 제어 기능:
접기 : 병합 전/후 포인트를 선택합니다. true는 시작점, false는 종료점입니다.
moveToPoint: 커서를 좌표로 이동합니다. moveToBookmark: 북마크로 이동합니다.
dom 범위의 영역 선택
dom 범위 객체 선택 영역은 주로 dom 노드를 좌표로 사용합니다. 모든 경계 이동 및 영역 선택 기능은
setEnd() setStart를 기준으로 합니다. ()는 범위의 앞, 뒤 경계점 위치에 대한 함수이며,
에는 두 개의 매개변수가 있는데, 첫 번째 매개변수는 dom 노드이고, 두 번째 매개변수는 오프셋입니다. 이 매개변수는 TextRange와 다릅니다. .move, dom 노드의 오프셋을 기준으로 합니다.
예: 텍스트 노드 node1이 있고 nodeValue는 aaabbbcccc이고 setStart(node1,3)는 문자 a와 b 사이의 시작 위치를 설정합니다.
그런 다음 예제 1과 같이 커서 앞의 4개 문자를 선택하는 방법은 다음과 같습니다. 이해해야 함 dom 범위 객체의 여러 속성:
endContainer에는 범위 끝점의 dom 노드가 포함되어 있습니다.
endOffset endContainer의 끝점 위치입니다.
startContainer에는 범위 시작점의 dom 노드가 포함되어 있습니다.
startOffset startContainer의 시작점 위치입니다.
예 2: dom 범위는 커서 앞의 4개 문자를 선택합니다.

var rg=window.getSelection().getRangeAt(0)
rg.setStart(rg.startContainer,rg.startOffset- 4 );//현재 범위 Strat의 노드와 오프셋을 가져와 계산 후 매개변수로 사용
//setStart 호출 후 명시적으로 선택되는데, 이는 TextRange
var text=rg와 다릅니다. toString();// 선택한 텍스트 가져오기
rg.collapse(false); //collapse 함수는 TextRange.collapse와 동일합니다

예제 2의 범위 선택 작업은 단일 텍스트 콘텐츠에 적합합니다. HTML 콘텐츠인 경우 이를 올바르게 얻으려면 추가 계산이 필요합니다. 일반적으로 DOM 범위의 상대 범위를 선택하는 것이 더 번거롭습니다. 복잡한 돔 구조에서.
또한 DOM 범위가 선택한 콘텐츠의 HTML 코드를 얻을 수 있는 직접적인 방법은 없습니다. html 편집 가능 상태에서는 aroundContents() 메서드를 사용하여 콘텐츠를span과 같은 태그로 묶은 다음 innerHTML을 통해 콘텐츠를 얻을 수 있습니다. 그러나 선택 범위 경계 지점이 html 시작 및 종료 태그 내에 있는 경우(예: as: 123경계점이 a 태그 내에 있음) 예외가 발생합니다.
다음은 예제 1과 예제 2의 코드와 테스트용 html 편집 가능 영역을 포함하여 테스트용 전체 ​​코드입니다.

p id="ifram_p"< /p>




text

TextRange 텍스트 삽입
TextRang을 사용하여 텍스트를 삽입하는 방법은 비교적 간단합니다. 단지 HTML 코드를 직접 삽입하려면 단지 HTML() 메서드만 호출하면 됩니다.
Dom Range로 텍스트 삽입
Dom Range를 사용하여 텍스트를 삽입하는 것은 상대적으로 복잡합니다. Dom Range 객체는 삽입을 구현하기 위해 insertNode() 메서드를 사용하지만 insertNode는 Range의 시작 부분에 노드를 삽입하며 매개변수는 다음과 같습니다. 문자열 대신 노드를 사용하면 텍스트 노드를 삽입하여 이를 달성할 수 있습니다. document.createTextNode를 사용하여 텍스트 노드를 생성하면 텍스트의 HTML 태그가 자동으로 변환되지만 공백은 특별한 경우이므로 변환되지 않습니다. 로 자동 변환됩니다. 이는 코드 들여쓰기를 개발할 때 골치 아픈 문제입니다. 최종 해결 방법은 Rang.createContextualFragment를 사용하는 것입니다. 비록 이 메서드는 문서에 없지만 여러 브라우저에서 이 메서드를 반환하는 것으로 테스트되었습니다. DocumentFragment 객체

. 샘플 코드는 다음과 같습니다.

예제 3:
Js 코드

코드 복사
코드는 다음과 같습니다.


var rg = window.getSelection().getRangeAt(0);
var 조각 = rg.createContextualFragment(str);
rg.insertNode(fragment)

이 코드는 삽입 텍스트를 구현하지만 "insertNode가 Range의 시작 부분에 노드를 삽입"하기 때문에 커서 위치는 텍스트가 삽입되기 전입니다. 다음으로 Range 개체의 위치를 ​​설정하고 업데이트해야 하는 커서 제어를 구현합니다. Selection 객체의 범위. 코드는 다음과 같습니다. 예제 4: Js 코드

코드 복사
코드는 다음과 같습니다.

var Selection=window.getSelection();
var rg=selection.getRangeAt(0);
var 조각 = rg.createContextualFragment(str)
var oLastNode = 조각.lastChild ; //DocumentFragment의 끝 위치를 가져옵니다
rg.insertNode(fragment);
rg.setEndAfter(oLastNode);//끝 위치 설정
rg.collapse(false);//병합 범위 끝
selection.removeAllRanges();//범위 지우기
selection.addRange(rg);//범위 설정

다음은 코드 들여쓰기 기능 예시 : 탭 키를 누르면 현재 위치에 공백 4개가 삽입되어 편집 중 탭을 입력할 수 없는 문제를 해결합니다. 실제 응용 프로그램의 기능에는 여러 줄 들여쓰기와 자동 들여쓰기가 포함됩니다.

코드 복사 코드는 다음과 같습니다.