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);

FIDDLE

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

为什么不用jQuery包装TD？

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

将html放入变量时保留缩进结构

2 个答案: