javascript - 遍历所有html元素并修改内容

标签 javascript jquery 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>

最佳答案

$(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>

关于javascript - 遍历所有html元素并修改内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32599989/

相关文章:

javascript - 单击匹配链接时切换单个 div 的属性

javascript - 当鼠标悬停在元素上时如何停止/开始循环 slider ?

html - 如何在不占用空间的情况下相对于另一个元素定位元素

javascript - 从 FunctionFile 中删除漫游设置时出现 Outlook 加载项问题

javascript - jQuery If 语句仅适用于平滑滚动

javascript - Stripe 用户 token 问题

javascript - Canvas 中的图像 ID

jquery - 在滚动时切换 CSS 属性

javascript - 左对齐的 div 不以某些页面大小为中心

html - 如何从选择 > 选项调用 AngularJS 函数