javascript - 将html放入变量时保持缩进结构

Question

我正在尝试制作一个 javascript 函数，该函数将<td>在字符串中找到所有标签并将它们设为红色。这样我就可以找到一个没有同伴的走错标签</td>。我的问题是，当我复制页面的 html 时，它会丢失所有缩进结构。无论如何要保持这种结构？

$(document).ready(function(){
   var html = $('body').html(); 

   html.replace('<td>', '<td><span class="red">'); 
   html.replace('</td>', '</td></span>'); 
   $('#result').text(html);
});

http://jsfiddle.net/KL3u3/2/

此外，字符串替换似乎根本不起作用。但一次只做一件事。

感谢您的任何想法！

Answer 1

$.ajax({
    url: document.location,
    dataType: "html" // get plain source
}).done(function(text) {
    $(function() {
         $("body").text(text).html(function(_, old) {
             return old.replace(/&lt;\/?td&gt;/g, '<span class="red">$&</span>');
         }).css({"white-space":"pre-wrap", "text-align":"left", "font-family":"monospace"});
    });
});

Answer 2

字符串替换仅替换第一次出现。要进行全局替换，您需要使用正则表达式。

var html = $('body').html(); 
    html = html.replace(/(<td>)/gi, '<td><span class="red">'); 
    html = html.replace(/(<\/td>)/gi, '</span></td>'); 
$('#result').text(html);

小提琴

另请注意，字符串替换是不可变的，必须再次声明回变量。

为什么不直接用 jQuery 包装 TD？

$('body').find('td').wrap('<span class="red" />');