Javascript - 3种 HTML 转换为纯文本的方法

几天，我手里的一个项目需要将富文本的所有 html 标签全部删除，得到纯文本后再存储到数据库中。在一系列得搜索操作之后，我找到了实现这个目的的几种方法，在这里我分享给大家，当你遇到同样的情况兴许也能用的上。

1. 使用 .replace(/<[^>]*>/g, '')

这个方法是从文本中去除 html 标签最简单的方法。它使用字符串的方法 .replace(待替换的字符串，替换后的字符串) 将 HTML 标签替换成空值。 /g 是表示替换字符串所有匹配的值，即字符串中所有符合条件的字符都将被替换。

这个方法的缺点是有些 HTML 标签不能被剔除，不过它依然很好用。

2. 创建临时DOM元素并获取其中的文本

这种方法是完成该问题的最有效的方法。创建一个临时 DOM 并给他赋值，然后我们使用 DOM 对象方法提取文本。

3. 使用 html-to-text npm 包

html-to-text 这个包的功能很全了，转换也有许多的选项比如：wordwrap, tags, whitespaceCharacters , formatters 等等。

安装：

npm install html-to-text

使用：

最后感谢阅读，如果此文对您有帮助，请点赞或添加关注。

喽，今天是一篇HTML to PDF速食指南。

Java 转换 HTML 到PDF有许多类库，今天我们介绍一下第三方免费的类库OpenPDF。

1. OpenPDF

OpenPDF是免费的Java类库，遵从LGPL 和 MPL协议，所以基本上能够可以随意使用。OpenPDF是基于iTEXT的，目前来说也是维护的比较好的Java操作PDF的开源软件。

话不多说，且看所需要的依赖，

<dependency>    
    <groupId>org.jsoup</groupId>    
    <artifactId>jsoup</artifactId>   
    <version>1.13.1</version> 
</dependency>
<dependency>
    <groupId>com.openhtmltopdf</groupId>
    <artifactId>openhtmltopdf-core</artifactId>
    <version>1.0.6</version>
</dependency>
<dependency>
    <groupId>com.openhtmltopdf</groupId>
    <artifactId>openhtmltopdf-pdfbox</artifactId>
    <version>1.0.6</version>
</dependency>

jsoup可以将html文件转换成输入流等，也可以遍历html的DOM节点，提取元素及样式等。

2. 示例

本篇示例将以下html文件转换成pdf

<html>
<head>
    <style>
        .center_div {
            border: 1px solid #404e94;
            margin-left: auto;
            margin-right: auto;
            background-color: #f6d0ed;
            text-align: left;
            padding: 8px;
        }
        table {
            width: 100%;
            border: 1px solid black;
        }
        th, td {
            border: 1px solid black;
        }
        body,html,input{font-family:"msyh";}
    </style>
</head>
<body>
<div class="center_div">
    <h1>Hello java North!</h1>
    <div>
        <p>convert html to pdf.</p>
    </div>
    <div>
        <table>
            <thead>
                <th>ROLE</th>
                <th>NAME</th>
                <th>TITLE</th>
            </thead>
            <tbody>
                <tr>
                    <td>MARKSMAN</td>
                    <td>ASHE</td>
                    <td>THE FROST ARCHER</td>
                </tr>
                <tr>
                    <td>MAGES</td>
                    <td>ANNIE</td>
                    <td>THE DARK CHILD</td>
                </tr>
                <tr>
                    <td>射手</td>
                    <td>凯塔琳</td>
                    <td>皮城女警</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
</body>
</html>

以上html用浏览器打开如下，乱码是因为中文字体不识别，下面转换的时候会加载对应的字体来进行转换。

使用Java转换HTML到PDF代码如下：

public class HtmlToPDFOpenSource {
    public static void main(String[] args) throws IOException {
        HtmlToPDFOpenSource htmlToPDFOpenSource = new HtmlToPDFOpenSource();
        htmlToPDFOpenSource.generatePdfByOpenhtmltopdf();
    }

    private  void generatePdfByOpenhtmltopdf() throws IOException {
        File inputHtml = new File("E:\\javaNorth\\java-study-note\\javaOpenSource\\src\\main\\resources\\test.html");

        //加载html文件
        Document document = Jsoup.parse(inputHtml, "UTF-8");
        document.outputSettings().syntax(Document.OutputSettings.Syntax.html);
        
        //引入资源目录，可以单独引入css，图片文件等
        String baseUri = FileSystems.getDefault()
            .getPath("javaOpenSource\\src\\main\\resources")
            .toUri().toString();
       
        try (OutputStream os = new FileOutputStream("javaOpenSource\\src\\main\\resources\\testOpenLeagueoflegends1.pdf")) {
            PdfRendererBuilder builder = new PdfRendererBuilder();
            builder.withUri("javaOpenSource\\src\\main\\resources\\testOpenLeagueoflegends1.pdf");
            builder.toStream(os);
            builder.withW3cDocument(new W3CDom().fromJsoup(document), baseUri);
            
            //引入指定字体，注意字体名需要和css样式中指定的字体名相同
            builder.useFont(new File("javaOpenSource\\src\\main\\resources\\fonts\\msyh.ttf"),"msyh",1,BaseRendererBuilder.FontStyle.NORMAL, true);
            builder.run();
        }
    }
}

使用Java代码转换成PDF如下（示例中使用了微软雅黑中文字体）：

上述html文件中增加如下外部样式：

<link href="style.css" rel="stylesheet">

并在resources目录下添加style.css文件，重新生成PDF文件如下。

3. 总结

本片介绍了使用OpenPDF将html文件转换成PDF文件。同时也使用了自定义字体，外部样式。但是以下几点需要格外注意。

Java代码中加载的字体名称要和HTML引用的CSS样式中的字体名相同（{font-family:"msyh";}）。
HTML文件标签节点必须闭合（<xxx></xxx>）.否则解析会失败。

全部示例在此：https://github.com/javatechnorth/java-study-note/tree/master/javaOpenSource/src/main/java/pdf

文章来源：Java技术指北

庆假期很适合学习点新知识。前几天有粉丝在后台问我关于使用 js 开发后端服务的建议，我给推荐了这一个面向小白的走向全栈开发工程师的教程。

关于这个全栈入门教程

这是一个面向零基础的基于 JavaScript 语言的全栈开发教程，教程基于目前流行的前后端分离开发模式，使用 Vue.js + Node.js 并且通过从实际需求的角度来完成基础的业务代码，没有过多功能封装，几乎都是底层的代码，通俗易懂，上手容易。

教程截图

关于作者

这套 JavaScript 全栈教程的作者是廖雪峰，是一位有着超过十年软件开发经验的大神，精通 Java / Python / Ruby / Visual Basic / Objective C 等，对开源框架有很深入的研究，著有《Spring 2.0核心技术与最佳实践》一书，是很多后端开发工程师非常熟知的业内大神。

教程目录

因为针对的是对 javascript 零基础的小白用户，因此这个教程有很大篇幅是 javascript 语言入门。

JavaScript简介
快速入门
函数
标准对象
面向对象编程
浏览器
jQuery
错误处理
underscore
Node.js

学习建议和感想

这是我毫无后端开发经验时学习后端开发的入门的教程，这套教程让我学会了如何使用 javascript 来开发后端 api 接口。而且前面的基础语法教程，也看得津津有味，复习了很多不会用、不常用但很巧妙的代码实现。这是我推荐这个教程的最大原因。

教程截图

这个教程除了适合零基础的小白，我认为这更像一个写给后端开发者的、从其他后端语言转 javascript 的教程，如果像我之前学习的那样没有过后端开发经验，就需要注意几个问题：

教程涉及的代码最后自己敲出来实现一遍，看懂并不代表会写
后端开发设计的基础知识很多，建议提前了解数据库、服务器基本知识，学习起来会更顺畅
教程中很多关联的代码片段，拷贝出来配合流程图来理解，会事半功倍

入门靠老师，修行靠自己。总的来说，这只是一套非常基础的入门教程，学完后能够了解前端开发和后端开发，可以实现简单的 demo，可以帮助我们学习 koa / egg.js 这类基于 Node.js 的后端开发框架，但后端开发需要学习的知识很多，数据库设计、查询优化、架构设计等等，成为一个合格的全栈工程师，路还有很远。

教程免费学习说明

这是一个完全免费的 JavaScript 全栈入门教程，就算完全不懂 js 也能快速入门，在线免费学习。如果想学 js 语法，也可以看看之前推荐过的阮一峰写的免费 javascript 系统学习入门教程。

最后祝各位有所收获，迈进全栈开发工程师行列。

关注我，持续分享高质量的免费开源、免费商用的资源。

↓↓点击查看本次分享的网址。

JavaScript 全栈开发入门 - 由廖雪峰提供的面向小白的免费在线教程｜那些免费的砖

在线咨询

上一篇：青年长江学者答辩ppt制作案例-青长ppt模板下载-长江学者奖励计划
下一篇：Go Web 框架 Gin 学习3 - 模板渲染多级目录与模板传参

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商