2015-09-16 57 views
0

我正在处理一个需要迭代外部html文件的每个元素并使用内部标记修改内容的项目。遍历所有html元素并修改内容

我想要一个递归的Java脚本函数,它将迭代所有DOM元素,并通过在开头和结尾附加#来修改每个内部标记中的内容。

<html> 
 
    <head> 
 
    </head> 
 
    <body> 
 
     <h1>Hello</h1> 
 
     <div id="something"><span><h1>Hello Folks!</h1></span></div> 
 
     <span>Lovely lady</span> 
 
     <div id="name"> 
 
      <div class="random"> 
 
       <div><span>0</span></div> 
 
       <div><span>1</span></div> 
 
      </div> 
 
     </div> 
 
     <div class="detail "> 
 
      <div class="">Process</div> 
 
      <div class="page">4 of 6</div> 
 
      <div class=" "> 
 
       <div class="float-left"> 
 
        <div class="padding-top-default">%</div> 
 
        <div class="page-subheader">1</div> 
 
       </div> 
 
       <div class=""> 
 
        <div class="">Failed</div> 
 
        <div class="page-subheader font-big">0</div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </body> 
 

 
</html>

我想#如果该值在标签内的硬编码追加。输出文件就像。

<html> 
 
    <head> 
 
    </head> 
 
    <body> 
 
     <h1>#Hello#</h1> 
 
     <div id="something"><span><h1>#Hello Folks!#</h1></span></div> 
 
     <span>#Lovely lady#</span> 
 
     <div id="name"> 
 
      <div class="random"> 
 
       <div><span>#0#</span></div> 
 
       <div><span>#1#</span></div> 
 
      </div> 
 
     </div> 
 
     <div class="detail "> 
 
      <div class="">#Process#</div> 
 
      <div class="page">#4 of 6#</div> 
 
      <div class=" "> 
 
       <div class="float-left"> 
 
        <div class="padding-top-default">#%#</div> 
 
        <div class="page-subheader">#1#</div> 
 
       </div> 
 
       <div class=""> 
 
        <div class="">#Failed#</div> 
 
        <div class="page-subheader font-big">#0#</div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </body> 
 

 
</html>

我有这样的Java脚本到位

<script> 
 
      
 
      
 
      //$fakediv = $("<div></div>"); 
 
     function convertHtml() { 
 
      
 
    
 
      $body = $("#demo").text(); 
 
       
 
      $fakediv = $("<div></div>"); 
 
      $fakediv.html($body); 
 
      $fakediv.children().each(function() { 
 
        if($(this).text()) 
 
        $(this).text("#" + $(this).text() + "#"); 
 
       }); 
 
      
 
      }); 
 
      $("#demo").text($fakediv.prop("outerHTML")); //fill in the text are with converted html string 
 
     
 
} 
 
      
 
     //Document is ready to execute the JS  
 
     $(document).ready(function() {  
 
      $("#convert").click(function(){ 
 
       // alert($("#demo").text()); 
 
       convertHtml(); 
 
      }); 
 
     }); 
 
     </script>
但发生了什么,输出类似

<div> 
 
    
 
    
 
    
 
     <h1>#Hello#</h1> 
 
     <div id="something">#Hello Folks!#</div> 
 
     <span>#Lovely lady#</span> 
 
     <div id="name"># 
 
      
 
       0 
 
       1 
 
      
 
     #</div> 
 
     <div class="detail "># 
 
      Process 
 
      4 of 6 
 
      
 
       
 
        % 
 
        1 
 
       
 
       
 
        Failed 
 
        0 
 
       
 
      
 
     #</div> 
 
    
 

 
</div>

+0

那你试试? –

+0

如果任何机构想要看看我在做什么,请留言我宁愿喜欢一对一地澄清我的问题 – AkAbhi

+0

请不要滥用网络代码段功能。它仅适用于可运行的Web代码。如果代码不可运行,请使用正常的源代码格式(按四个空格缩进或使用Ctrl-K)。 – Amadan

回答

0

您可以使用text function

$('body *').text(function(_, txt){ 
    return '#'+txt+'#'; 
}); 

这里有一个demo

如果有身体内的任何样式规则和JavaScript的,那么你可以使用not忽略它们:

$('body *').not('link,style,script').text(function(_, txt){ 
     return '#'+txt+'#'; 
}); 
+0

这是一个外部html文件,我需要在div元素中显示修改后的源代码 – AkAbhi

+0

这将杀死所有标记。 – Amadan

+0

现在它只会杀死所有不是'link,style,script'的标记。你需要像'$('*:not(> *)')''来防止有孩子执行杀戮行为的元素。或者,根据OP的需求,您想要查找所有文本节点(jQuery不知道该怎么做),只能将其包装。 – Amadan

0

给一个类的所有元素的文本,你想包裹智慧h #。然后使用下面的代码:

$('.hashed').each(function(index, value){ 
    $(this).text("#" + $(this).text() + "#"); 
}); 

那么,如果你不能编辑HTML不是使用下面的CSS选择最深的元素:

'*:not(:has(>*))' 

这里是工作代码:

$(document).ready(function(){ 
 
    $('*:not(:has(>*))').each(function(index, value){ 
 
    $(this).text("#" + $(this).text() + "#"); 
 
    }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<html> 
 
    <head> 
 
    </head> 
 
    <body> 
 
     <h1>Hello</h1> 
 
     <div id="something"><span><h1>Hello Folks!</h1></span></div> 
 
     <span>Lovely lady</span> 
 
     <div id="name"> 
 
      <div class="random"> 
 
       <div><span>0</span></div> 
 
       <div><span>1</span></div> 
 
      </div> 
 
     </div> 
 
     <div class="detail"> 
 
      <div>Process</div> 
 
      <div class="page">4 of 6</div> 
 
      <div class=" "> 
 
       <div class="float-left"> 
 
        <div class="padding-top-default">%</div> 
 
        <div class="page-subheader">1</div> 
 
       </div> 
 
       <div class=""> 
 
        <div>Failed</div> 
 
        <div class="page-subheader font-big">0</div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </body> 
 
</html>

+0

这是一个外部文件,我无法将类添加到需要修改的每个标记中。那么可能的解决方案是什么。 – AkAbhi

+0

@AkAbhi然后你可以使用CSS选择器来选择所有最深的元素。然后对它们执行操作。编辑我的帖子。 – afzalex

+0

这就是我们无法使用CSS修改DOM内容的问题。 Insted看看我的编辑帖子。 – AkAbhi

3

$(document).ready(function() { 
 
    $('body').find('*').each(function() { 
 
    if ($(this).children().length == 0) { 
 
     $(this).prepend('#').append('#') 
 
    } 
 
    }) 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<html> 
 
    <head> 
 
    </head> 
 
    <body> 
 
     <h1>Hello</h1> 
 
     <div id="something"><span><h1>Hello Folks!</h1></span></div> 
 
     <span>Lovely lady</span> 
 
     <div id="name"> 
 
      <div class="random"> 
 
       <div><span>0</span></div> 
 
       <div><span>1</span></div> 
 
      </div> 
 
     </div> 
 
     <div class="detail "> 
 
      <div class="">Process</div> 
 
      <div class="page">4 of 6</div> 
 
      <div class=" "> 
 
       <div class="float-left"> 
 
        <div class="padding-top-default">%</div> 
 
        <div class="page-subheader">1</div> 
 
       </div> 
 
       <div class=""> 
 
        <div class="">Failed</div> 
 
        <div class="page-subheader font-big">0</div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </body> 
 

 
</html>

0

在这里你去。不像其他人,这将不会添加'##'到标签没有内容,如img,br,空span s等,等等...

function eachNode($root) { 
    if ($root.children().size() == 0) { 
     if ($root.text().trim() !== '') $root.text('#' + $root.text() + '#'); 
    } else { 
     $root.children().each(function() { 
      eachNode($(this)); 
     }); 
    } 
} 

eachNode($(document)); 

结帐小提琴这里:http://jsfiddle.net/hra0qste/2/

+0

请注意,这不会避免修改脚本标签,但可以通过if($ root [0] .tagName ==='SCRIPT')return' – DBagBaggerWithSwagger

1

懒惰版本(不会做<p>foo <em>bar</em></p>什么"foo"):

var html = '<html>\n <head>\n </head>\n <body>\n  <h1>Hello</h1> \n  <div id="something"><span><h1>Hello Folks!</h1></span></div>\n  <span>Lovely lady</span>\n  <div id="name">\n   <div class="random">\n    <div><span>0</span></div>\n    <div><span>1</span></div>\n   </div>\n  </div>\n  <div class="detail ">\n   <div class="">Process</div>\n   <div class="page">4 of 6</div>\n   <div class=" ">\n    <div class="float-left">\n     <div class="padding-top-default">%</div>\n     <div class="page-subheader">1</div>\n    </div>\n    <div class="">\n     <div class="">Failed</div>\n     <div class="page-subheader font-big">0</div>\n    </div>\n   </div>\n  </div>\n </body>\n\n</html>\n'; 
 
    
 
$html = $("<html/>").html(html); 
 
$html.find('*:not(:has(*))').text(function(_, txt) { 
 
if (txt.trim() == "") return ""; 
 
    return "#" + txt + "#"; 
 
}); 
 
$('#output').text($html[0].outerHTML);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<pre id="output"></pre>

非延迟版本包括寻找文档中的所有文本节点,jQuery不知道该怎么做,所以我们我使用树步行者。奖金,没有jQuery的:

var html = '<html>\n <head>\n </head>\n <body>\n  <h1>Hello</h1> \n  <div id="something"><span><h1>Hello Folks!</h1></span></div>\n  <span>Lovely lady</span>\n  <div id="name">\n   <div class="random">\n    <div><span>0</span></div>\n    <div><span>1</span></div>\n   </div>\n  </div>\n  <div class="detail ">\n   <div class="">Process</div>\n   <div class="page">4 of 6</div>\n   <div class=" ">\n    <div class="float-left">\n     <div class="padding-top-default">%</div>\n     <div class="page-subheader">1</div>\n    </div>\n    <div class="">\n     <div class="">Failed</div>\n     <div class="page-subheader font-big">0</div>\n    </div>\n   </div>\n  </div>\n </body>\n\n</html>\n'; 
 

 
var impl = document.implementation; 
 
var htmlDoc = impl.createHTMLDocument(""); 
 
htmlDoc.write(html); 
 

 
var walker = htmlDoc.createTreeWalker(
 
    htmlDoc.documentElement, 
 
    NodeFilter.SHOW_TEXT, null, false); 
 
var node; 
 
while ((node = walker.nextNode())) { 
 
    if (node.textContent.trim() !== "") { 
 
    node.textContent = "#" + node.textContent + "#"; 
 
    } 
 
} 
 

 
document.getElementById('output').textContent = htmlDoc.documentElement.innerHTML;
<pre id="output"></pre>

注意的是,由于HTML解析的某些细节,外界<body>东西可能会是不一样的。 DBagBaggerWithSwagger与另一种解决方案相比的说明在这里也是有效的。

0

这也应该工作:

function isHTML(str) { 
    var a = document.createElement('div'); 
    a.innerHTML = str; 
    for (var c = a.childNodes, i = c.length; i--;) { 
     if (c[i].nodeType == 1) return true; 
    } 
    return false; 
} 

$(document).ready(function() { 
    var content = document.getElementsByTagName('*'); 
    for (var i = 0; i < content.length; i++) 
    { 
     if (isHTML($(content[i]).html()) == false) 
     { 
      $(content[i]).html('#' + $(content[i]).html() + '#'); 
     }   
    } 
});