我正在处理一个项目，该项目需要迭代外部 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/