2011-12-17 2 views
0

$ (element) .text() 및 $ (element) .html() 출력을 비교하여 html 태그의 위치를 ​​결정하는 루틴을 작성하려고합니다. 나중에 document.execCommand()를 사용하지 않고 contenteditable에 "strong"및 "em"과 같은 형식 지정 태그를 적용하는 데 사용됩니다. 이 시점에서 필수 charabters가 html 엔티티로 변환됩니까?

나는 각각의 HTML로 변환 할 필요, 즉 비교 작업을하는 등 '>', '<', 그리고 $ (요소)의 '&'는 .text() 출력으로 문자를 실현 엔티티. 방화 광에서 이러한 문자가 innerHTML 속성에서 자동으로 변환되는 것을 볼 수 있습니다. 나는 다른 캐릭터를 시도했다. 따옴표와 움라우트와 같은 것들은 변환되지 않습니다.

내 질문은 :

  1. 브라우저에서 일관되게 변환되는 그 문자의 필수 세트 (내 생각 엔> 것 < 및 &)이 있습니까? 내 타겟 브라우저는 파이어 폭스와 크롬이며 IE는 없다. 선량에게 감사한다.

  2. 이 문자 세트는 jQuery의 .html() 메소드에 의해 존중 받거나 jQuery는 브라우저 간의 차이점을 없애기 위해 자체적으로 수행합니다. 그렇다면 jQuery가 엔티티로 변환하는 핵심 문자의 포괄적 인 목록을 어디에서 찾을 수 있습니까?

또한 설명하십시오의 contentEditable에 내가있는 경우

이 텍스트 단락은 수동으로 입력 :

some text, and some characters >, <, ", &, ', ë 

$('p').text() 나에게 줄 것이다 :

some text, and some characters >, <, ", &, ', ë 

것이다 $('p').html()을하면서 나에게 줘.

some text, and some characters &gt;, &lt;, ", &amp;, ', ë 

이것은 방화 광 및 크롬 개발자 도구에서 볼 수있는 결과이기도합니다.

따옴표 및 특수 문자는 작동하지 않지만 모든 것이 작동하려면 분명히 <,> 및 &이 필수적입니다.

$('p').html()의 출력과 태그 자체가 일치하지 않도록 모두 찾기/바꾸기를 통해 $('p').text()의 결과를 변환하고 싶습니다.

나는 분명히 <,>, 그리고 &과 같은 다른 문자를 알아야 완벽하게 일치하도록 html 엔티티로 변환해야합니다.

이 의미 : 나는 기존의 WYMEditor과 함께 제공 iframe을 의지하지 않고의 contentEditable 사업부 간단한 WYSIWYM 에디터를 구축을 위해 노력하고

.

이것은 제어 된 환경 (내 사용자 지정 CMS)에서 사용되며 HTML 편집기에서 예상되는 기능의 하위 집합을 허용합니다. 기본적으로 전체 내용은 contenteditable div에있는 P, H1-H6 및 UL> LI, OL> LI 태그의 묶음입니다.

콘텐츠 태그 (UL, OL 자식이없는 P, H1-H6 및 LI 태그)에는 STRONG, EM, A, SUB, SUP 및 SPAN 태그 만 포함 할 수 있습니다.

IE를 타겟팅하지 않지만 플랫폼 차이가없는 FF 및 Chrome에서이 기능을 사용하고 싶습니다. 이러한 플랫폼 차이 중 하나는 text.execCommand()가 텍스트를 강조하거나 기울임 꼴로 표시 할 때 수행되는 방식입니다. FF는 선택 사항을 감싸고 크롬은 태그를 사용합니다. 다음과 같은 방법으로 서식을 적용하기로 결정했습니다 :

  1. 선택 범위를 가져옵니다.
  2. 범위 내의 모든 "콘텐츠 태그"를 나열하십시오.
  3. 범위 개체를 사용하고 각 "콘텐츠 태그"와의 관계는 선택 전, 선택 후 및 선택 후 텍스트의 세 가지 청크를 정의합니다. 이들은 특수 문자가 엔티티로 변환되지 않은 직선 텍스트로 제공됩니다.
  4. 각 "내용 태그"innerhtml에 대해, 나는 각 종류의 태그의 "지도"로 분해하기 위해 문자별로 구문을 분석합니다. 나는 태그의 계층 구조를 확립했다 : a span> sub> strong> em. 이처럼 "지도"입니다 뭔가 : innerHTML을위한

: this <em>is <strong>a</strong></em> <a href="#"><strong>test</strong> 텍스트

text: this is a test text 
    a: __________XXXXXXXXX 
strong: ________X_XXXX_____ 
    em: _____XXXX__________ 
  1. 선택하기 전에, 선택 및 선택 텍스트 후를 사용하여뿐만 아니라 포맷 작업, I 다음 마스크를 만드십시오. 예를 들어 경우 '이되어'굵은 글씨 할 필요가 : 마스크는 다음과 같습니다
text: this is a test text 
strong: XXXXXXX____________ 
  1. 지도와 마스크를 조합 한 후, 생성되는 맵은 다음과 같습니다
text: this is a test text 
    a: __________XXXXXXXXX 
strong: XXXXXXX_X_XXXX_____ 
    em: _____XXXX__________ 
  1. 이지도는 HTML로 변환됩니다 :
<strong>this <em>is</em></strong><em> </em><strong><em>a</em></strong> <a href="#"><strong>test</strong> 
  1. 는 "컨테이너 태그"결과 HTML과의 innerHTML을 교체합니다.

이제 내가이 질문을하는 이유는 HTML에서 추출한 텍스트 청크와 범위에 의해 완벽하게 일치하는 텍스트가 필요하다는 것입니다. 그래서 나는 특수 문자를 변환 할 수는 없지만 "필수"문자 만 변환합니다.

이 방법이이 문제를 해결하는 가장 쉽고 빠른 방법은 아닐지 모르지만 저는 시각적 사고를하는 사람입니다. 2 차원 그리드에 문제를 배치하는 것이 크게 도움이됩니다.

답변

1

여기에서 시도하고있는 질문은 실제로 분명하지 않습니다.지금 내가 말할 수있는 모든 위해

은 다음과 같습니다 .html()/ .innerHTML에 기록하는 경우 예, <, >& (또한 '" 그들과 함께 인용 속성 내에서 사용하는 경우) 해야이 탈출 할 수 있습니다. 그들은 모든 경우에 이 필요하지 않지만 항상 이스케이프 처리해야합니다.

보다 포괄적 인 대답이 필요한 경우 (예를 들어 코드 예와 같이) 좀 더 구체적으로 설명해야합니다.

편집 :

나는 아직도 내가 당신이 달성하려고하는 것을 이해 있는지 확실하지 않습니다. p 요소 안에있는 HTML 요소 (태그)를 없애려고하십니까? 그럼 당신은 단지 텍스트를 읽을 설정하고 다시 설정 :

$("p").text($("p").text()); 

을 아니면 그냥 문제가 문자를 변환해야하는 경우, 당신은 "unanonymous"요소를 사용할 수 있습니다, 당신이 오 변환을 기원은 텍스트에 text을의 설정 읽고 .html() :

alert($("<div>").text("some text, and some characters >, <, \", &, ', ë").html()); 
+0

답을 보내 주셔서 감사합니다. 추가 질문을 보내 주셔서 감사합니다. 나는 이것을위한 어떤 관련 코드도 없다. 지금까지 – Andri

+0

은 <, > 및 & 문자 만 필수적인 것 같습니다. 수락하기 – Andri

+0

@ 앤드 리 : 내 업데이트를 참조하십시오. – RoToRa

관련 문제