使用jquery将div转换为span

Question

我试图改变我无法控制的小部件的HTML输出.基本上问题是窗口小部件输出的HTML使用ap内部的div是无效的.

<div class="widget_output">
    <ul>
        <li>
            <p>
                <div>This is a random item</div>
                <div>This is a random item</div>
                <div>This is a random item</div>
                <div>This is a random item</div>
            </p>
       </li>
       <li>
            <p>
                <div>This is a random item</div>
                <div>This is a random item</div>
                <div>This is a random item</div>
                <div>This is a random item</div>
            </p>
        </li>
</div>

我的想法是将div更改为内联元素的跨度,然后HTML应该是有效的.我一直在寻找jquery尝试选择类,然后将这些div转换为spans.任何人都可以指出我正确的方向或实现类似的东西的教程吗？

Answer 1

把JSFiddle放在一起:

http://jsfiddle.net/daYL4/3/

$(".widget_output div").replaceWith(function() { 
    return "<span>" + this.innerHTML + "</span>"; 
});

似乎比我原来的建议更好地工作.但是看看这个相关问题的答案,因为它们涵盖了一些好处:

使用jQuery更改HTML标记？

Answer 2

您不需要 jQuery，只需使用正则表达式即可用<div>标签替换标签<span>。尝试这个：

var widgetHTML = $('div.widget_output').html();
    widgetHTML = widgetHTML
       .replace(/<div>/g, '<span>')
       .replace(/<\/div>/g, '</span>');
$('div.widget_output').html(widgetHTML);

演示： http: //jsfiddle.net/codef0rmer/daYL4/3/