tag] html 소스 태그 삭제용 스크립트.. (for IE8)

1)
html 에 관련한 작업을 하다가,
가끔씩 황당(?)한 태그들이 연이어 나와있는 경우가 있는데요,

그런 태그들이 하나둘도 아니고,
기존 html 형식이라 꼬일대로(?) 꼬인 태그들을

어떻게하면 조금 더 빨리 처리할 수 있을까..싶어서 만들어봤습니다.

...

2)

복사용<textarea id=x1_120724 name=x1_120724 onclick=parse_120724(); ><span>123<font size=1>456</font>789</span></textarea> <- 처리할 내용물 넣으시고 클릭하시면 처리할 값 보여줍니다<br/>
처리할값<textarea style="width:500px; height:500px; overflow:auto;" id=x2_120724 name=x2_120724 ></textarea><br/>
처리후복구용임시값<textarea is=x3_120724 name=x3_120724 ></textarea><br/>
<input type=button value="바깥 태그 삭제" onclick="kill_120724();" />
<input type=button value="태그 처리 미루기" onclick="skip_120724();" />
<input type=button value="처리된 태그들 원복하기" onclick="revive_120724();" />
<script>
// IE8 용으로만 작성했습니다.
// chrome, firefox..등으로 변환하려면, 뭘 체크해야할지 고민되서요..
var parse_120724, kill_120724, skip_120724, revive_120724;
// 함수선언시작
(function() {
var
  rA=[], lA=[]
  , sA=[], eA=[], ssA=[], sssA=[], eeA=[], eeeA=[]
  , fP;
// 찾을 태그 정규식..
  sA[0]=/<font[^>]*>/gi; eA[0]=/<\/font[^>]*>/i;
  sA[1]=/<span[^>]*>/gi; eA[1]=/<\/span[^>]*>/i;
  sA[2]=/<a[^>]*>/gi; eA[2]=/<\/a[^>]*>/i;
  sA[3]=/<strong[^>]*>/gi; eA[3]=/<\/strong[^>]*>/i;
  sA[4]=/<style[^>]*>/gi; eA[4]=/<\/style[^>]*>/i;
/** 처리할 값 찾기 **/
parse_120724=function () {
  var
    v=x1_120724.innerText
    , i, j, k
//    , ov=''
    ;
  for (i=0; i<eA.length; i++) {
    if ((eeA[i]=v.search(eA[i]))<0) ssA[i]=-1;
    else {
      eA[i].exec(v);
// 맨 나중값과 맨처음위치 잡기
      eeeA[i]=eA[i].lastIndex;
      w=v.substring(0, eeA[i]);
      while (j=sA[i].exec(w)) ssA[i]=(sssA[i]=sA[i].lastIndex)-j[0].length; }
    }
  fP=-1;
  for (i=0; i<eA.length; i++) {
    if (fP<0) { if (ssA[i]>=0) fP=i; }
// 먼저 닫은 태그를 집습니다.
    else { if (ssA[i]>=0) { if (eeA[i]<eeA[fP]) fP=i; } }
    }
  if (fP<0) x2_120724.innerText='';
  else {
    x2_120724.innerText=v.substring(ssA[fP], eeA[fP])+eA[fP].exec(v);
    }
//  for (i=0; i<eA.length; i++) {
//    ov+=ssA[i]+' '+eeA[i]+' / ';
//    }
//  ov+='['+fP+']';
//
//alert(ov);
  }
/** 바깥 태그 삭제 **/
kill_120724=function () {
  var
    v=x1_120724.innerText
    , i, j, k
//    , ov=''
    ;
// 발견된게 없으면 넘어가고
  if (fP<0) // x2_120724.innerText=''
    ;
// 있다면 처리합니다.
  else {
//    x1_120724.innerText=v.replace( x2_120724.innerText, v.substring(ssA[fP], eeA[fP]) )
    x1_120724.innerText=v.substring(0, ssA[fP])+v.substring(sssA[fP], eeA[fP])+v.substring(eeeA[fP], v.length);
    }
//  for (i=0; i<eA.length; i++) {
//    ov+=ssA[i]+' '+eeA[i]+' / ';
//    }
//  ov+='['+fP+']';
//
//alert(ov);
  parse_120724();
//  alert(ssA[fP]+' '+sssA[fP]+' '+eeA[fP]+' '+eeeA[fP]);
  }
/** 태그 처리 미루기 **/
skip_120724=function () {
  var
// 복사용
    v=x1_120724.innerText
// 처리할 값
    , w=x2_120724.innerText
    , i, rV, j
// 처리될 범위
    , ov=v.substring(0, v.indexOf(w)+w.length)
    , ov2='';
  i=rA.length;
// 처리된 후 복사용에 남을 텍스트
  rV='{'+i+'}';
// 보관중인 텍스트
  rA[i]=rV; lA[i]=w;
// 복사용 처리해서 보관하기
  x1_120724.innerText=v.replace(w, rV);
  for (j=0; j<rA.length; j++) {
    ov2+=rA[j]+' / '+lA[j]+'\n\r';
    }
// 텍스트 보관중임을 알림
  x3_120724.innerText=ov2;
  parse_120724();
  }
/** 처리된 태그들 원복하기 **/
revive_120724=function () {
  var
    ov=x1_120724.innerText, i;
  for (i=rA.length-1; i>=0; i--) {
    ov=ov.replace(rA[i], lA[i]);
    }
  x1_120724.innerText=ov;
  x3_120724.innerText='';
  rA.length=0; lA.length=0;
  }
// 함수선언 종료
}());
</script>

...

3)

복사용<span>123<font size=1>456</font>789</span> <- 처리할 내용물 넣으시고 클릭하시면 처리할 값 보여줍니다
처리할값
처리후복구용임시값

...

4)
아마도, 정규식을 자주 쓰고계시는 프로그래머분들에게는
실소나올 내용일지 모르겠지만,

= =;.. 전 이 상태에서도 버거워요..
.. 뭐, 그건 그렇고..

5)
source 내용쪽에 있는 주석들 처럼
대충 그런 내용들입니다.
(원래는 주석 안달지만, 설명을 위해 달아야할 필요가 있더라구요..)

태그는 a, strong, font, font, style 에 한정을 했구요..

...

6)
사용 방법은

"복사용"쪽 내용에 태그 있는 html 소스를 넣고
마우스 클릭하면 "처리할 값" 쪽에 찾은 태그 포함한 전체 내용물을 보여주는데요,

해당 태그 내용물의 
바깥을 싸고 있는 태그는 삭제할지(바깥 태그 삭제),
처리 안하고 넘길지(태그 처리 미루기)
선택하면서

나오는 태그 죄다(..라고는 하지만, 5가지밖에 안됨..) 보는 형식입니다.

태그가 더이상 나오지 않으면
[처리된 태그들 원복하기] 로 처리된 결과를 "복사용"에 넣어주는데요,

그걸로 처리작업은 끝난거고,
완료된 "복사용"에서 복사해 사용하시면 되는겁니다.

...

7)
개선할만한 사항은 .. 무지 많겠지만, .. 예를 든다면

처리할값..에 보여줄 바깥 태그를 강조한다든지,
5개 태그형식 말고 다른 태그형식도 자동화해서 지원한다든지,
style 태그 안쪽 내용은 태그와 일체화시켜 한꺼번에 삭제한다든지,
chrome, firefox 에서도 동작되게 한다든지,
여러가지 오류가 발생하지 않도록 대처 방안을 생각한다든지..

.. 뭐, 여러가지 나오겠네요.

급하게 만들고, 급하게 처리한거라
보기에 좀 지저분해보일겁니다.

= =;.. 프로그래밍 잘 못하는 제가 만든 거라 생각하시면
이해하시겠죠.

easyBow killofki@.