2011-09-27 8 views
1

로드 된 후 javascript를 사용하는 HTML 페이지에서 "안녕 엄마"라는 텍스트를 삭제하려고합니다.자바 스크립트를 사용하여 텍스트를 제거하십시오.

jQuery와 같은 프레임 워크를 사용할 수 없습니다.

DOM을 사용할 수는 있지만 어딘가에 태그가있는 것 이외의 다른 위치는 알 수 없습니다.

평범한 예전 Javascript로이 작업을 수행 할 수 있습니까?

답변

2

다음은 매우 간단한 DOM 걷기입니다.

동일한 텍스트 노드에 두 번 이상 나타날 수 있다고 생각되면 개선 될 수 있지만 그럴 듯하지는 않습니다.

DEMO :http://jsfiddle.net/UrNWb/

var text_to_remove = "Hi Mom"; 

function dom_walk(el) { 
    if(el.nodeType === 1 && el.childNodes.length) { 
     if(el.nodeName.toLowerCase() !== 'script') { 
      for(var i = 0; i < el.childNodes.length; i++) { 
       dom_walk(el.childNodes[ i ]); 
      } 
     } 
    } else if(el.nodeType === 3) { 
     if(el.data.indexOf(text_to_remove) !== -1) { 
      el.data = el.data.replace(text_to_remove, ''); 
     } 
    } 
} 

dom_walk(document.body); 
+0

멋지지만 indexOf 테스트가 중복 된 것처럼 보입니다. 교체 만하고 (코드 줄을 저장하는 것보다) 왜 안되는가요? 또한 el.childNodes.length에 대한 테스트를 이해하지 못한다. 0이면 for 루프는 무시 될 것이다. – RobG

+0

@RobG : 저는'indexOf'가'.replace()'+ 재 할당보다 빠른 작업이라는 생각을 가지고 있습니다. 그리고'.length'를 사용하면'toLowerCase() '처럼 가능한 경우'if' 내부의 추가 작업을 피하려고 노력하고 있습니다 만, 맞아도 제거 될 수 있습니다. – user113716

+0

...하지만 스크립트의 경우'.length'는'0'이 아니기 때문에 실제로는 아무런 의미가 없습니다. 편집 : 사실, 난 그냥 테스트를했고, 적어도 크롬에서'

-1

document.body.innerHTML = document.body.innerHTML.replace("Hi Mom", "") 괜찮은 시작이어야합니다.

+1

전체 DOM 구조를 파괴하고 복원하는 것은 좋지 않습니다. – user113716

+1

방금 ​​문서에서 인라인이 아닌 모든 리스너가 삭제되었으며, 그 과정에서 많은 속성과 기본 속성이 손상되었을 수 있습니다. – RobG

1

가장 쉬운 솔루션 :

function removeText(s) { 
    var el, els = document.getElementsByTagName('*'); 
    var node, nodes; 

    for (var i=0, iLen=els.length; i<iLen; i++) { 
    el = els[i]; 

    if (el.tagName.toLowerCase() != 'script') { 
     nodes = el.childNodes; 
    } else { 
     nodes = []; 
    } 

    for (var j=0, jLen=nodes.length; j<jLen; j++) { 
     node = nodes[j]; 

     if (node.nodeType == 3) { 
     node.data = node.data.replace(s, ''); 
     } 
    } 
    } 
} 

window.onload = function() { 
    removeText('hi mom'); 
} 

는 또한 재귀 버전을 할 수 있지만 위는 간단하다.

관련 문제