스크립트를 보존하더라도 html로 자바 스크립트 관련 항목이 깨집니다.

Question

본문의 innerHTML (예, body 태그의 모든 내용)을 가져 와서 모든 아랍어 숫자 (123)를 아랍어 - 인도어로 변환하는 스크립트가 있습니다. 숫자 (123)를 변경하고 innerHTML을 변경된 것으로 대체합니다. 이제 구문 분석기가 완벽하게 작동하여 사용자가 페이지에서 볼 수있는 숫자 만 변경하고 태그 속성의 숫자는 피하고 스크립트, 스타일, noscript와 같은 '민감한'태그 안의 내용은 그대로 유지합니다 (나가 일하고있는 약간 꼬임), 나가 그것을에 원하는처럼! (이 방법으로 크롬 확장 프로그램에서 실행 중이며 onLoad 이벤트가 발생하면 스크립트가 실행됩니다.)

하지만 어떤 이유로 인해 일부 기능이 작동하지 않습니다. 예를 들어 스택 오버플로에 대해 임의의 질문을합니다. 위쪽/아래쪽 투표 단추가 작동을 멈 춥니 다. 난 원래 및 구문 분석되지 않은 htmls 나서서 비교 :

http://www.diffchecker.com/gJE1v50f

모두가 좋아 보이는을; 사용자에게 보이는 일부 링크 (예 : 서식 지정 도움말 부분의 일부 링크)가 변경되었지만 수정하는 계획을 가지고 있지만 어쨌든 스크립트에 아무런 영향을 미치지 않으므로 숫자는 무시해도됩니다. 지금 당장. 페이지의 본문에 HTML을, 위의 설명에서 언급 한 바와 같이 답변 :

Answer 1

에 대한 감사의 더 큰 금액을 읽어 주셔서 교체

덕분에 (모든 새로운 불구하고 동일한 원인 원래의) 요소가 생성되어 그 요소에 첨부 된 모든 이벤트가 삭제됩니다. 당신이하고 싶은 것은 몸에있는 모든 텍스트 노드를 반복하는 것입니다. xpath를 사용하는 것이 가장 쉽습니다.

xpath = new XPathEvaluator() 
xpath.evaluate("//text()", document.body) 

현재 문서의 본문에있는 모든 텍스트 노드의 배열을 반환합니다. 그런 다음 루프를 반복하고 각각의 내용을 수정할 수 있습니다.

다른 문제는 수정중인 텍스트 노드의 숫자를 구문 분석하는 스크립트가 여전히 손상 될 수 있다는 것입니다. 나는 이것에 대한 생각할 수있는 유일한 솔루션 (예, 아주 hackish 임) Number 함수의 동작 확장하는 것입니다 : 당신은 또한 모든 작업을 얻기 위해에서는 parseInt과에서는 parseFloat 기능을 확장 할 것

(function(){ 
    var oldNumber = Number 
    window.Number = function(obj){ 
    if(typeof obj == "string"){ 
     // replace numerals 
     var numerals = ["٠","١","٢","٣","٤","٥","٦","٧","٨","٩"] 
     for(idx in numerals){ 
     obj = obj.replace(new RegExp(numerals[idx],"g"), idx) 
     } 
     // replace decimal point 
     obj.replace(/٫/g,".") 
    } 
    return oldNumber(obj) 
    } 
})() 

을, 코드는 거의 동일하지만 이렇게하면 html의 숫자를 구문 분석하는 스크립트가 손상되지 않게됩니다. 그러나 웹 페이지에 다시 숫자를 표시하면 정상적인 아랍어 숫자가됩니다. 이 문제를 해결하려면 Number의 toString 메서드를 확장 할 수 있지만 상대적으로 안전한 숫자 구문 분석 함수를 확장하는 것보다 위험 할 수 있습니다.

Answer 2

나는 텍스트 노드를 받고 직접 수정하는 것이 좋습니다 : http://jsfiddle.net/6pLeR/

// this will get all text nodes that are descendant of element. 
function getTextNodes(element) { 
    var nodes = [], 
     children = element.childNodes, 
     i=0, child = children[0]; 

    for (; i < children.length; i++, child=children[i]) { 
     if (child.nodeType === 3) nodes.push(child); 
     else nodes = nodes.concat(getTextNodes(child)); 
    } 

    return nodes; 
} 

var nodes = getTextNodes(document.body); // get all text nodes in the body. 

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

    node.data = node.data.replace(/text/g, "banana"); // replace "text" with "banana" 
}​ 

당신은 클릭 이벤트는 노드의 데이터의 변화에 ​​영향을받지 데모를 볼 수 있습니다.