JS 实现：一键复制 div 内容到 TXT 文件，自动删 HTML 标签且保留换行！

以下是一个使用 JavaScript 实现复制 `div` 内的内容到 TXT 文件，同时自动删除 HTML 标签并保留换行的代码示例： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <body>  <div id="myDiv"> <p>这是第一行文本。</p> <p>这是第二行文本。</p> </div>  <button id="downloadButton">下载为 TXT</button> <script> // 获取 div 元素和按钮元素 const myDiv = document.getElementById('myDiv'); const downloadButton = document.getElementById('downloadButton'); // 为按钮添加点击事件监听器 downloadButton.addEventListener('click', function () { // 获取 div 内的 HTML 内容 let htmlContent = myDiv.innerHTML; // 移除 HTML 标签，保留换行符 let textContent = htmlContent.replace(/<[^>]*>/g, '').replace(/<br\s*\/?>/gi, '\n'); // 创建一个 Blob 对象，用于存储文本内容 const blob = new Blob([textContent], { type: 'text/plain;charset=utf-8' }); // 创建一个 URL 对象，用于生成下载链接 const url = URL.createObjectURL(blob); // 创建一个 a 元素，用于触发下载 const a = document.createElement('a'); a.href = url; a.download = 'content.txt'; // 模拟点击 a 元素，触发下载 a.click(); // 释放 URL 对象，避免内存泄漏 URL.revokeObjectURL(url); }); </script> </body> </html> ``` 代码解释： 1. 获取元素：通过 `document.getElementById` 方法获取 `div` 元素和按钮元素。 2. 添加事件监听器：为按钮添加 `click` 事件监听器，当按钮被点击时执行相应的操作。 3. 处理 HTML 内容：使用正则表达式 `/<[^>]*>/g` 移除所有 HTML 标签，使用 `replace(/<br\s*\/?>/gi, '\n')` 保留换行符。 4. 创建 Blob 对象：使用 `Blob` 构造函数创建一个包含文本内容的 Blob 对象。 5. 生成下载链接：使用 `URL.createObjectURL` 方法生成一个临时的下载链接。 6. 触发下载：创建一个 `a` 元素，设置其 `href` 和 `download` 属性，模拟点击该元素触发下载。 7. 释放 URL 对象：使用 `URL.revokeObjectURL` 方法释放临时的下载链接，避免内存泄漏。 ######[AI问答 | 654点数解答 | 2025-09-05 17:17:24]

服务商

更多选项

快捷项

自定义