酷代码 AI
菜单
服务商

js复制div内的内容到txt文件,自动删除html标签,并保留换行的代码 on

以下是一个使用 JavaScript 实现复制 `div` 内的内容到 TXT 文件,同时自动删除 HTML 标签并保留换行的代码示例: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <body> <!-- 示例 div --> <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` 方法释放临时的下载链接,避免内存泄漏。 [2025-09-05 17:17:24 | AI问答 | 654点数解答]

相关提问
聚合导航,免费问AI
实用工具查看更多
今日油价 [生活类]
图片互转base64 [开发类]
时间转换器 [开发类]
数独游戏 [娱乐类]
经典推箱子 [娱乐类]
AI摸鱼五子棋 [娱乐类]