如何用JavaScript的replace移除含id的DOM以导出干净XLS？

方法一：使用正则表达式配合replace（字符串处理场景） #

如果你的HTML是以字符串形式存在的，可以用正则匹配所有带id属性的<input>元素，然后替换为空。

正则表达式需要匹配：

• 以<input开头
• 包含id="xxx"属性
• 以>结尾的整个标签

示例代码：

const originalHtml = `<td>
<input id="id-1" value="111"><br>
<p">111</p>
<input id="id-2" value="222"><br>
<p">222</p>
<input id="id-3" value="3"><br>
<p">333</p>
<input id="id-4" value="4"><br>
<p">444</p>
<input id="id-5" value="4"><br>
<p">555</p>
</td>`;

// 正则匹配带id属性的input标签
const cleanedHtml = originalHtml.replace(/<input[^>]+id="[^"]+"[^>]+>/g, '');

console.log(cleanedHtml);

这段代码会把所有带id属性的<input>标签替换为空，得到你期望的结果。

方法二：DOM操作（浏览器环境推荐） #

如果是在浏览器中直接操作DOM，这种方法更可靠（不会因为HTML格式变化导致正则失效），步骤如下：

1. 获取目标<td>元素
2. 找到所有带id属性的<input>子元素
3. 逐个移除这些元素

示例代码：

// 获取目标td元素
const tdElement = document.querySelector('td');
// 获取所有带id属性的input元素
const inputElements = tdElement.querySelectorAll('input[id]');

// 遍历并移除每个元素
inputElements.forEach(input => input.remove());

执行这段代码后，页面中的<td>元素就会只剩下<br>和<p>标签，符合你的导出需求。

注意事项 #

• 正则处理HTML有局限性：如果<input>标签跨多行、属性顺序变化或者包含特殊字符，正则可能需要调整。因此优先推荐DOM操作方法。
• 你提供的原始HTML中<p&quot;>存在语法错误（多了一个引号），建议修正为<p>，避免导出时出现格式问题。

内容的提问来源于stack exchange，提问作者samkung