Question

我正在使用生成HTML脚本的平台。我不能改变它的格式。原因是它是一个私有平台，并以特定方式生成数据。我创建了一个查询（让我们说月份和数字），并以HTML格式显示数据，如下所示：

<table>
<tbody>
    <tr>
        <td>
    <table>
    <tbody>
      <tr><td>Jan</td></tr>
      <tr><td>Feb</td></tr>
      <tr><td>Mar</td></tr>
    </tbody>
    </table>
    </td>
        <td>
    <table>
    <tbody>
      <tr><td>1</td></tr>
      <tr><td>2</td></tr>
      <tr><td>3</td></tr>
    </tbody>
    </table>
    </td>
    </tr>
</tbody>
</table>

我希望将其转换为：

<table>
    <tr>
        <td>Jan</td>
        <td>Feb</td>
        <td>Mar</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>

我想使用替换功能，但这将适用于标签，而不是文本，如下所示：

＆＃13;

$(document).ready(function(){
    $("button").click(function(){
        $("p:first").replaceWith("I HAVE REPLACED IT");
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>

<p>REPLACE THAT.</p>
<p>Leave it as is.</p>

<button>Replace the first sentence</button>

＆＃13;

所以，然后我尝试更换标签：

＆＃13;

$('li').replaceWith(function () {
    return $('<td/>', {
        html: $(this).html()
    });
});

＆＃13;

td {
    text-align: center;
    vertical-align: middle;
    line-height: 90px;
    background-color: #ccc;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tbody>
      <tr><li>Jan 2017</li></tr>
      <tr><li>Feb 2017</li></tr>
      <tr><li>Jun 2017</li></tr>
    </tbody>
    </table>

＆＃13;

然后我尝试从头开始替换标签，但后来我不知道如何将值重新分配到新的表标签中：

＆＃13;

var regex = /<\/?([a-z])+\>/g;
    
var str =  '<table><tr><td>Jan</td><td>Feb</td><td>Mar</td></tr><tr><td>1</td><td>2</td><td>3</td></tr></table>';
var result = str.replace( regex, "");

document.write(result);

＆＃13;

我认为理想的情况是编辑最后一个片段并使其替换标签，然后输出（而不是在控制台中）结果。但我不确定如何使这项工作。

另一个想法是使用正则表达式获取文本而不是html标记，并且对于每个匹配，将结果分配到新表中。

请告诉我你的想法。我可能会更新这个问题。我花了好几个小时都没有成功。

UPD

我根据第一个答案更新了剪辑：

＆＃13;

function myFunction() {
let htmlFromService = '<table><tbody><tr><td><table><tbody><tr><td>Jan</td></tr><tr><td>Feb</td></tr><tr><td>Mar</td></tr></tbody></table></td><td><table><tbody><tr><td>1</td></tr><tr><td>2</td></tr><tr><td>3</td></tr></tbody></table></td></tr></tbody></table>'

let fragment = window.HtmlFragment(htmlFromService);

let newTable = document.createElement('table');

Array
  .from(fragment.querySelectorAll('tbody tbody'))
  .forEach(tbody => {
    let tr = newTable.appendChild(document.createElement('tr'));
    Array
      .from(tbody.querySelectorAll('td'))
      .forEach(td => {
        tr.appendChild(td);
      });

  });

document.write(newTable.outerHTML);
}

＆＃13;

<script src="https://npmcdn.com/html-fragment@1.1.0/lib/html-fragment.min.js"></script>
<head>

</head>

<body>

<script>

</script>

</body>

＆＃13;

Answer 1

在进行DOM操作时，始终尝试使用DOM查询API而不是正则表达式。在此解决方案中，我使用DocumentFragments来创建可查询的DOM。

我是通过将从服务返回的HTML字符串转换为DocumentFragment来完成的。从那里，我能够查询元素，并获得我想要的元素，并将它们添加到新表中。

＆＃13;

let htmlFromService = `<table><tbody><tr><td><table><tbody><tr><td>Jan</td></tr><tr><td>Feb</td></tr><tr><td>Mar</td></tr></tbody></table></td><td><table><tbody><tr><td>1</td></tr><tr><td>2</td></tr><tr><td>3</td></tr></tbody></table></td></tr></tbody></table>`

let fragment = window.HtmlFragment(htmlFromService);

let newTable = document.createElement('table');

Array
  .from(fragment.querySelectorAll('tbody tbody'))
  .forEach(tbody => {
    let tr = newTable.appendChild(document.createElement('tr'));
    Array
      .from(tbody.querySelectorAll('td'))
      .forEach(td => {
        tr.appendChild(td);
      });

  });

console.log(newTable.outerHTML);

＆＃13;

<script src="https://npmcdn.com/html-fragment@1.1.0/lib/html-fragment.min.js"></script>

＆＃13;

免责声明：我使用了一段时间的自我编写的npm包，将HTML转换为名为html-fragment的文档片段。

替换HTML标记或检索其中的文本

1 个答案: