2009-07-18 4 views
11

사용자가 선택한 것을 기반으로 HTML을 조작하는 자바 스크립트가 있습니다. 실제 브라우저의 난은 "범위"개체 레버리지를 사용하고 방법은 다음과 같은 얻을 :자바 스크립트 범위 객체의 줄 바꿈 감지 문제

var sel = window.getSelection(); 
    var range = sel.getRangeAt(0); 
    var content = range.toString(); 

내용 변수가 잘 작동 선택한 모든 텍스트가 포함되어 있습니다. 그러나 결과 문자열에서 줄 바꿈을 감지 할 수 없다는 것을 알게되었습니다. 예를 들어 :

선택한 텍스트는 다음과 같습니다

ABC

데프

GHI

range.toString() "ABCDEFGHI"로 평가한다.

특수 문자를 검색하면 \ n \ f \ r 또는 \ s의 인스턴스가 반환되지 않습니다. 그러나 편집 가능한 컨트롤에 변수를 쓰면 줄 바꿈이 다시 나타납니다.

내가 누락 된 부분을 아는 사람이 있습니까?

이러한 선택 및 조작은 편집 가능한 div에 관한 것이 적절할 수 있습니다. Chrome, FireFox 및 Opera에서도 동일한 동작이 나타납니다. 놀랍게도 IE에는 완전히 다른 코드가 필요하지만 IE가 아닌 다른 문제는 없습니다.

감사합니다.

+0

'range.toString()은 "abcdefghi"로 평가된다는 것이 무슨 뜻입니까? 그 가치를 조사하기 위해 당신은 무엇을 사용하고 있습니까? 디버거? 경보()? –

+0

'range' 값을 편집 가능한 컨트롤이나'range.toString()'에 쓰고 있습니까? – RaYell

+0

@Ben 위의 모든 것, 외부 디버거, 경고 또는 브라우저 기반 디버거를 사용하여 던롭. 예를 들어 Visual Studio로 중단 점에 들어가기. @RaYell - 내 range.toString()에서 결과를 작성하여 편집 가능한 div로 호출하여 줄 바꿈 정보를 유지했음을 증명했습니다. 첫 번째 대답은 네일이지만, sel.toString()에는 줄 바꿈이 있지만 range.toString()에는 줄 바꿈이 없습니다. 감사합니다. – Timbo

답변

11

내 게시물을 편집 :

조금 실험, 나는 당신이보고의 contentEditable div의에서 sel.toString() 반환의 새로운 라인, range.toString() 반환이 제대로 정상이 아닌 편집 된 div에서 줄 바꿈 있지만 편집 가능한 것들 중에, 같은 것을 찾을 수 있습니다.

동작에 대한 설명을 찾을 수 없습니다.

이것은 내가 적어도 두 가지 다른 방법을 발견 유용한 링크 http://www.quirksmode.org/dom/range_intro.html

+0

Excellent, yel, sel.toString()에 개행 문자가 있습니다. 매우 감사합니다! – Timbo

+1

설명은 간단하며 DOM Range spec에 배치되어 있습니다. 'Range.toString()'은 텍스트 노드의 내용 만 포함합니다. '
'요소와 블록 요소에 의해 암시 된 줄 바꿈은 포함되지 않습니다. –

+1

'document.getSelection(). toString()'이 IE 11에서 작동하지 않습니다. 모든 새로운 줄 텍스트를 하나로 병합합니다. – agpt

1

, 그래서 당신은 여전히 ​​모질라에서 캐럿의 위치를 ​​찾을 수있는 범위를 사용할 수 있습니다.

방법 중 하나는 childNodes에의 배열을 보유하고

var documentFragment = rangeObj.cloneContents(); 

를 호출하는 것입니다, 그리고 줄 바꿈 클래스의 노드 "HTMLBRElement"로 표시됩니다.


다른 방법은 모든 "br"태그 뒤에 줄 바꿈 문자 (0x0a)가 오도록하는 것입니다!

이렇게하면 HTML 콘텐츠가 눈에 띄지는 않지만, 이제는 range.toString()이 호출되는 즉시 모든 HTML 나누기가 일반 텍스트 줄 바꿈으로 변환됩니다!


이 주제가 매우 오래된 경우에도 도움이되기를 바랍니다. (나는 이미 네크로 맨서인데, hehe) :)