时间戳

首页 > 解决方案 > 如何将 HTML 片段中的文本写入带有换行符的文本文件？

javascript - 如何将 HTML 片段中的文本写入带有换行符的文本文件？

问题描述

我有一个以 '[time][username]: message here<div>格式接收来自用户的消息。

我正在尝试将此 div 的内容下载到文本文件中。我所做的工作，但是，下载的内容看起来像，“ <p><i>19:27:05</i> <strong>Bob</strong>: hey</p>”。它还在其中显示另一个 div。

如何在下载中忽略这些 <> 标记，并让每条消息单独出现在一行上，类似于它们在呈现 HTML 本身时的显示方式？

例如：

19:27:05 鲍勃：嘿

19:30:00 彼得：你好吗？

脚本.js：

var downClick = document.getElementById('download');

downClick.addEventListener('click', function(){
    downloadInnerHtml(fileName, 'chat','text/html');
})

function downloadInnerHtml(filename, elId, mimeType) {
    var elHtml = document.getElementById(elId).innerHTML;
    var link = document.createElement('a');
    mimeType = mimeType || 'text/plain';

    link.setAttribute('download', filename);
    link.setAttribute('href', 'data:' + mimeType  +  ';charset=utf-8,' + encodeURIComponent(elHtml));
    link.click(); 
}

var fileName =  'chat history.txt';

HTML：

<div id="chat" class="chat">
   <div class="istyping" id="istyping"></div>
</div>

标签： javascripthtml

解决方案

您正在寻找元素内的文本，但您正在选择 HTML。

要仅获取元素内的文本及其所有后代，请使用HTMLElement.innerText。

来自 MDC 网络文档：

HTMLElement 接口的 innerText 属性表示节点及其后代的“渲染”文本内容。作为一个 getter，它近似于用户使用光标突出显示元素的内容然后将其复制到剪贴板时将获得的文本。

推荐阅读