jQuery text () 호출은 Firefox에서 Newlines를 보존하지만 IE는 아닙니다.

StackOverflow https://stackoverflow.com/questions/656605

문제

나는 일을 해요:

alert($("#div").text());

다음과 같은 것 :

<div id="div">
&lt;div&gt;
Some text
&lt;div&gt;
</div>

탈출 된 콘텐츠는 왜? 때로는 기본적이며 문서의 나머지 부분을 방해하거나 깨뜨리는 것을 원하지 않기 때문입니다.

FF에서는 신형 보존에 나타납니다. IE7에서는 그렇지 않습니다. 공백을 보존해야합니다. 이 콘텐츠는 실제로 편집을 위해 Textarea로 진행됩니다.

그리고 누군가가 풍부한 텍스트 편집기를 추천하기 전에이 코드는 실제로 HTML이 아닙니다. 맞춤 방언입니다.

그렇다면 신약을 어떻게 유지합니까?

도움이 되었습니까?

해결책

이것이 내 문제인 것 같습니다. Internet Explorer Innerhtml Quirk:

그러나 InnerHTML은 Internet Explorer에 문제가 있습니다.

HTML 표준은 컨텐츠 표시시 변환이 필요합니다. 인접한 공백의 모든 종류와 양이 단일 공간으로 무너집니다. 이것은 좋은 일입니다. 예를 들어, 표시된 텍스트에서 이상한 줄 브레이크에 대해 걱정하지 않고도이 소스 파일에 많은 줄 브레이크를 추가 할 수 있습니다.

Internet Explorer는 이러한 변환을 InnerHTML 속성에 적용합니다. 이것은 좋은 생각처럼 보입니다. 디스플레이 중에 약간의 시간이 절약됩니다. 메모리 내 표현이 이미 정규화되면 텍스트를 표시해야 할 때마다 브라우저가 정규화 될 필요가 없기 때문입니다.

그러나 정규화 규칙에는 예외가 있습니다. 특히, 이것들입니다u003Ctextarea> 요소, <fre> 요소 및 CSS 인식 브라우저에서는 값을 가진 요소이지만 흰색 공간 속성의 경우 정상입니다.

Internet Explorer는 이러한 특별한 경우를 존중하지 않습니다. 세 번째는 흰색 공간이 런타임 (예 : DOM)을 통해 변경 될 수 있기 때문에 최적화가 나쁜 아이디어를 만듭니다. 어쨌든 Internet Explorer는 모든 할당을 내부 HTML 속성에 정규화하여 아래에있는 효과를 발생시킵니다.

이 텍스트는 페이지로드에서 TextArea를 채 웁니다. 여기에는 라인 브레이크와 여러 공간이 포함되어 있습니다. UA가 라인을 깨뜨릴 수 있다는 점을 제외하고 서식은 여기에도 유지됩니다.

(강조 추가)

그리고 실제로 변경하면 :

<div id="div">
<pre>
...
</pre>
</div>

그리고

$("#div pre").text()

또는 간단히 :

<style type="text/css">
#div { white-space: pre }
</style>

그것은 모두 마술처럼 작동합니다.

다른 팁

이것이 도움이 될지 확실하지 않지만 아마도 이것을 시도 할 수 있습니다.

#div {
  white-space: pre;
}

보다 여기 해결 방법 :

해킹은 먼저 Clonenode ()를 사용하여 원하는 내용을 복제하는 것입니다.

다음으로 당신은 a를 만듭니다 <pre> CreateElement ()가있는 요소를 사용한 다음 복제 된 노드를 추가하십시오.

이제 해당 생성의 내부 텍스트를 얻을 수 있습니다 <pre> 요소를하고 임시 객체를 삭제하십시오. 당신은 이제 공백 보존 텍스트를 가지고 있습니다 :)

var cloned = targetElement.cloneNode(true);
var pre = document.createElement("pre");
pre.appendChild(cloned);
var textContent = pre.textContent ?
  pre.textContent : pre.innerText;
delete pre;
delete cloned;

내가 요소를 복제하는 이유는 AppendChild ()가 DOM에서 그것을 꺼내고 DOM의 올바른 위치에서 다시 삽입되기 때문입니다.

바라건대 이것은 몇몇 사람들을 도와줍니다 :)

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top