如何使用jquery替换html标签

时间:2013-10-07 06:41:31

标签: javascript jquery html

我想使用java脚本将div和span标记更改为tr td。 但java脚本替换函数只替换第一次出现并保持原样。

<div style="width:100%">
  <div style="border-bottom:1px solid #DDDDDD; padding:10px 0px; height:100%; overflow:hidden;">
    <span style="width:420px; display:block; float:left; border-bottom:1px thin #333333;background:#F2F2F2">
      Custom Stirrups : Category - Adult ,Size-One size fits most 
    </span> 
    <span style="width:220px; display:block; float:left; border-bottom:1px thin #333333;background:#F2F2F2">
      NO
    </span>
    <span style="width:140px; display:block; float:left; border-bottom:1px thin #333333;background:#F2F2F2">
      1
    </span><br />
  </div>
  <div style="border-bottom:1px solid #DDDDDD; padding:10px 0px; height:100%; overflow:hidden;"> 
    <span style="width:420px; display:block; float:left; border-bottom:1px thin #333333;background:#F2F2F2">
      Flat Visor Fitted : Fitted Sizes - 7 1/8 
    </span> 
    <span style="width:220px; display:block; float:left; border-bottom:1px thin #333333;background:#F2F2F2">
      NO 
    </span> 
    <span style="width:140px; display:block; float:left; border-bottom:1px thin #333333;background:#F2F2F2">
      1
    </span>
    <br />
  </div>
</div>

我想要类似于此的东西

<table width="100%">
        <tbody>
          <tr>
            <td width="471" style="background:#F2F2F2">Cap : Fitted Sizes - 6 5/8 </td>
            <td width="240" style="background:#F2F2F2">YES</td>
            <td width="145" style="background:#F2F2F2">1</td>
          </tr>
          <tr>
            <td width="471" style="background:#F2F2F2">Grey Dri-fit Undershirt : Size - XXL </td>
            <td width="240" style="background:#F2F2F2">YES</td>
            <td width="145" style="background:#F2F2F2">1</td>
          </tr>
         </tbody>
      </table>

这是我正在尝试的剧本...请让我知道我哪里错了

var data = $('#dvData').html();
  data = data.replace('/<div style="width:100%">/g', '<table width="100%"><tbody><tr>');
  data = data.replace('/</div>/g', '</tbody></table></tr>');

提前致谢..

5 个答案:

答案 0 :(得分:0)

参见http://www.w3schools.com/jsref/jsref_replace.asp 这是全球替代品:

var str="Mr Blue has a blue house and a blue car";
var n=str.replace(/blue/g,"red");

此处也提供了其他示例。

答案 1 :(得分:0)

我看到你也标记了jquery,所以假设你也接受jquery?

您可以使用.replaceWith()

$('span, div, tr , td').replaceWith('Replaced!');

答案 2 :(得分:0)

好吧,当解析dom时,它是不可更改的/不可变的

你可以试试这个:

$('div').contents().unwrap().wrap('<tr/>');

看那里的tr标签......

如果它不起作用试试这个

$(this).replaceWith($('<tr>' + this.innerHTML + '</tr>'));

答案 3 :(得分:0)

你可以尝试这样的事情......我知道这不是最好的方法......

var data = $('#dvData').html();
  data = data.toString();
    data = data.replace('<div style="width:100%">', '<table width="100%">');
data = data.replace('span', 'td');

答案 4 :(得分:0)

所以尝试使用.replaceAll()。如果它没有帮助,请使用循环。