html구조]..를 단순화해봤습니다.

1)
html 을 DOM 을 기준으로 추적하고,
RegExp 로 추적이 쉽도록(?) 단순화(?)시켜봤습니다.

..

2)

<SCRIPT>

var structShort131206_1;

(function(){

structShort131206_1=function () {
  var
    d=document.getElementById('editor131206_1')
    , v=document.getElementById('htmlv131206_1')

    , ov=''
    , refer , n, nn, nf, ee=100
    ;

//  v.innerText=d.innerHTML;

  for (refer=[d]; refer.length; ) {
 if (!(--ee)) break;
    n=refer.pop();
 ov+=n.nodeName+' ';
 
 if (nn=n.nextSibling) {
   refer.push(n.nextSibling);
   }

    if (nf=n.firstChild) {
   ov+='{ '; // have child..
   refer.push(n.firstChild);
   }
    if (!nn&&!nf) {
      ov+='/ '; // can not count about pop counts..
      }
  
    }

  v.innerText=ov;
  }

})();

</SCRIPT>

html 간략표시<BR><TEXTAREA style="WIDTH: 400px; HEIGHT: 100px; OVERFLOW: auto" name=htmlv131206_1 id=htmlv131206_1></TEXTAREA>
<br><br><br>
editor131206_1 <BR><br>
<DIV
style="BACKGROUND-COLOR: #eeeeee; WIDTH: 400px; HEIGHT: 200px; OVERFLOW: auto"
id=editor131206_1 onmouseup=structShort131206_1(this);
contentEditable=true>
  <div id=show131206_1>
    .
    <font color=red>
      -
      <div id=show131206_2>
        --
        <span id=show131206_4> --- </span>
        <div id=show131206_3>
        </div>
      </div>
      -
    </font>
    .
  </div>
</DIV>

-- 새 창에 샘플 띄우기.. --  

..

3)

html 간략표시



editor131206_1

. -

-- ---

- .

..

4)
editor131206_1 지역(?)에 편집된 내용을 올려놓고 클릭하면 (contentEditable 이라 편집 가능합니다.)
html 간략표시 지역에 구조를 출력한다는 형식입니다.

refer 는 추적예약기(?)이고,
n 은 구조설명을 위한 DOM pointer 이고,
nn 은 글자순서상 동생노드(?)의 존재유무를,
nf 는 자식노드(?)의 존재유무를 보여주죠.

refer 에는 표시하려는 pointer 를 쌓아두고
쌓아둔 포인터 내부에 더(?) 표시할 것이 남아있으면
더 표시하도록 refer 에 쌓는 역할을 하고 있구요.

닫는 태그는 전부 구현하는 게 아닌,
심플(?)하게 '/' 로 종료시켰죠.

..

5)
위의 구조로 표현한 것이, 처음 설명한 대로
RegExp 를 이용해서 추적하려는 목적으로 만든 것이죠.

위의 예제에서 표시된 기준으로 fromString 에서
<div 내에<span 이전의 텍스트를 찾는다..라면

( /<div[^>]*([^<]*)<span/i ).exec( fromString )[1]

*주의* 기능표시 하지 않고, 테스트도 하지 않은 코드입니다.

요런 식이 될겁니다.

구조를 분석하지 않았다면

( /<div[^>]*(([^<]*)|<(?!span))*)<span/i ).exec( fromString )[1]

*주의* 기능표시 하지 않고, 테스트도 하지 않은 코드입니다.

요렇게 조금(?) 더 길어지고, 추적식이 복잡하게 되겠죠.

물론, 유사구조체가 훨씬 많은 경우, 조금 더 복잡하게 걸러낼 수도 있지만요.

..

6)
ee 는, 혹시나..싶은 무한루프 대비용 코드입니다. .. 표시갯수 제한용일 수도 있지만요..

..

wantHate killofki@.