【问题标题】:How to parse html content to text file with formatting?如何将html内容解析为带有格式的文本文件?
【发布时间】:2016-01-14 09:11:43
【问题描述】:

我有一个应用程序,用户可以在其中使用 ajax 调用执行一些操作。完成 ajax 调用后,操作的结果将使用id = "log" 附加到我的 div 中。我想在他完成工作后创建一个用户选项(按钮 - 导出),他可以将他的“活动日志”导出到 .txt 文件中。到目前为止,我已经成功做到了,但是 html 会转换为带有标签等的 txt 文件。我想删除标签并格式化该 .txt 文件,但不知道如何。

我的 HTML 代码是

<input type="button" value="Export" onclick="exportLog();">
<div id="log">
    <p>Action 1 successful</p>
    <p>Action 2 unsuccessful </p>
    <p>Action 4 - contact admin</p>
    <p>...etc</p>
</div> 

Javascript代码是

function exportLog(){
    var elHtml = document.getElementById('log').innerHTML;
    var link = document.createElement('a');
    var mimeType = 'text/plain';

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

我在this 的帮助下完成了这项工作。它可以工作,但我的 .txt 文件就像

<p>Action 1 successful</p><p>Action 2 unsuccessful </p><p>Action 4 - contact admin</p><p>...etc</p>

我想看起来像

Action 1 successful
Action 2 unsuccessful 
Action 4 - contact admin
...etc

如何做到这一点?

【问题讨论】:

  • 用户可以使用其他html标签吗?还是只有

    会?

  • 为什么标签很重要?这个标签有什么特别之处还是我遗漏了什么?
  • 因为,我可以建议使用正则表达式来完成这项任务。而且这个正则表达式必须知道将使用什么标签。
  • 那么只允许

    标签

标签: javascript html export


【解决方案1】:

第一种方法:innerHTML 更改为innerText

你的工作code

我只改变了这一行

var elHtml = document.getElementById('log').innerText;

第二种方法:

你可以使用textContent API

JsFiddler link

PS : 我可以通过这两种方法获取带有换行符的文本

请参考我的文本编辑器的截图供您参考。

【讨论】:

  • 它删除了标签,但所有值仍然在 1 行中,但正如您在我的问题中看到的那样,我希望每个

    标签都有新行。

  • 是的,你是对的,但是为什么我的记事本(Windows 10)没有显示我自己行中的每一行,而其他程序却显示了呢?现在我很困惑。
  • @KuKeC 我已经用可能的选项更新了答案。我可以看到在文本格式中应用了换行符,并且文本编辑器可以正确识别它。
  • 感谢快速简单的解决方案。 +1 :)
【解决方案2】:

好的,如果只使用 p 标签,那么这应该可以工作

var stringWithNewLines = logContent.replace(/<p>(.+?)<\/p>/g, function(str, p1, offset, s) {
      return p1 + "\n"; 
});

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2018-07-10
    • 1970-01-01
    • 2018-05-17
    • 2017-10-28
    • 2019-11-29
    • 2016-10-17
    • 1970-01-01
    相关资源
    最近更新 更多