show the code

前提:需要mammoth包~

  1. import React, { useState, useReducer } from 'react';
  2. import { Button, Alert, Table, Badge, Input, Upload } from 'antd';
  3. import CommonTable from '@cps/CommonTable';
  4. import styles from './receive.less';
  5. import { UploadOutlined } from '@ant-design/icons';
  6. import mammoth from 'mammoth';
  7. function reducer(state: any, action: any) {
  8. return {
  9. ...state,
  10. ...action.data
  11. };
  12. }
  13. const NovelAnalyze = () => {
  14. const [state, dispatch] = useReducer(reducer, {
  15. content: ''
  16. });
  17. const getTextInfo = (file: any) => {
  18. const reader = new FileReader();
  19. reader.readAsText(file, 'gb2312');
  20. reader.onload = (result: any) => {
  21. console.log(result);
  22. let targetNum = result.target.result;
  23. console.log(targetNum);
  24. };
  25. return false;
  26. };
  27. const getWordInfo = (file: any) => {
  28. const reader = new FileReader();
  29. reader.onload = function(loadEvent: any) {
  30. const arrayBuffer = loadEvent.target['result'];
  31. mammoth
  32. .extractRawText({ arrayBuffer: arrayBuffer })
  33. .then(function(resultObject) {
  34. console.log('extractRawText', resultObject.value);
  35. })
  36. .done();
  37. };
  38. reader.readAsArrayBuffer(file);
  39. return false;
  40. };
  41. return (
  42. <div>
  43. <ul className={styles.optionBtnList}>
  44. <li>
  45. <Button type='primary'>导出</Button>
  46. <Upload action='' accept='text/plain' beforeUpload={getTextInfo} showUploadList={false}>
  47. <Button>
  48. <UploadOutlined />
  49. 上传txt文件
  50. </Button>
  51. </Upload>
  52. <Upload
  53. action=''
  54. accept='.doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document'
  55. beforeUpload={getWordInfo}
  56. showUploadList={false}
  57. >
  58. <Button>
  59. <UploadOutlined />
  60. 上传word文件
  61. </Button>
  62. </Upload>
  63. <Button type='primary'>导入word</Button>
  64. </li>
  65. </ul>
  66. </div>
  67. );
  68. };
  69. export default NovelAnalyze;

正则分割段落

原文:

第259章 这是259内容 第262章 这是262内容 第666章 测试内容

str.replace(/\s*(第\d+章)\s*/g, "@@@$1___").split("@@@").filter(item => item).map(item => ({[item.split("___")[0]]: item.split("___")[1]}))

结果:

  1. 0: {第259章: "这是259内容"}
  2. 1: {第262章: "这是262内容"}
  3. 2: {第666章: "测试内容"}

js 读取word和txt(react版) + 正则分割段落的更多相关文章

  1. js读取修改创建txt文本类型文件(.ini)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. js读取本地json/txt/xml存在跨越问题,可以用jsonp 读取本地json文件

    想自己用 js写一个原生的ajax请求,访问本地文件,json/txt.但是demo,写了一个后,发现 原来是跨域了. js 写的原生ajax 请求代码如下 html代码 <div id=&qu ...

  3. js读取文本内容,支持csv.txt

    js读取文本内容,支持csv.txt <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...

  4. ZK中使用JS读取客户端txt文件内容问题

    最近写一个需求时遇到一个问题,用户需要通过点击一个按钮直接读取他自己电脑上D盘的一个txt文件内容显示到页面,因为项目现在是用ZK写的.我对于ZK也是刚刚了解不就,很多都还不是很熟.起初我是想用io流 ...

  5. POI 读取word (word 2003 和 word 2007) (转)

    最近在给客户做系统的时候,用户提出需求,要能够导入 word 文件,现在 microsoft word 有好几个版本 97.2003.2007的,这三个版本存储数据的格式上都有相当大的差别,而现在 9 ...

  6. php 如何写入、读取word,excel文档

    如何在php写入.读取word文档 <? //如何在php写入.读取word文档 // 建立一个指向新COM组件的索引 $word = new COM("word.applicatio ...

  7. word和.txt文件转html 及pdf文件, 使用poi jsoup itext心得

    word和.txt文件转html 及pdf文件, 使用poi jsoup  itext心得本人第一次写博客,有上面不足的或者需要改正的希望大家指出来,一起学习交流讨论.由于在项目中遇到了这一个问题,在 ...

  8. 使用新一代js模板引擎NornJ提升React.js开发体验

    当前的前端世界中有很多著名的开源javascript模板引擎如Handlebars.Nunjucks.EJS等等,相信很多人对它们都并不陌生. js模板引擎的现状 通常来讲,这些js模板引擎项目都有一 ...

  9. C# 添加、读取Word脚注尾注

    脚注和尾注是对文本的补充说明.脚注一般位于页面的底部,可以作为文档某处内容的注释:尾注一般位于文档的末尾,列出引文 的出处等.在本示例中将介绍如何来添加或删除Word脚注. 工具使用:Free Spi ...

随机推荐

  1. CF3D Least Cost Bracket Sequence 题解

    题目 This is yet another problem on regular bracket sequences. A bracket sequence is called regular, i ...

  2. Codeforces 1215D Ticket Game 题解

    Codeforces 1215D Ticket Game 原题 题目 Monocarp and Bicarp live in Berland, where every bus ticket consi ...

  3. linux安装phantomjs

    一.下载PhantomJS: 从官网http://phantomjs.org/download.html下载linux64位的安装包即  phantomjs-2.1.1-linux-x86_64.ta ...

  4. 【Windows10】如何使用Segoe MDL2 Assets图标

    众所周知,在Windows 10中,微软引入了汉堡菜单,方便Android和ios的开发者移植程序,而不需要单独为Windows设计一套UI.但有人可能发现在symbol icon里根本找不到所谓的汉 ...

  5. 什么?你还不会通过纯js提交表单?

    如果程序已经封装好了, 不管后台是java .asp.net   .还是php   ?这个时候你的客户突然追加说我要 追加表单验证?   what  妇产科    怎么办? submit  自带刷新效 ...

  6. order by 注入姿势

    order by 注入原理 其实orde by 注入也是sql注入的一种,原理都一样就是mysql语法的区别,order by是用来排序的语法. sql-lab讲解 判断方法 1.通过做运算来判断如: ...

  7. scala 数据结构(十一):流 Stream、视图 View、线程安全的集合、并行集合

    1 流 Stream stream是一个集合.这个集合,可以用于存放无穷多个元素,但是这无穷个元素并不会一次性生产出来,而是需要用到多大的区间,就会动态的生产,末尾元素遵循lazy规则(即:要使用结果 ...

  8. python numpy indexerror: too many indices for array

    import numpy as np #data 原来数组 #arr_1 新数组 #将data的第一列赋值给arr_1的第一列 arr_1 = np.array((data.shape[0],5)) ...

  9. JVM 专题十:运行时数据区(五)堆

    1. 核心概述 1.1 堆概述 一个进程对应一个jvm实例,一个运行时数据区,又包含多个线程,这些线程共享了方法区和堆,每个线程包含了程序计数器.本地方法栈和虚拟机栈. 一个jvm实例只存在一个堆内存 ...

  10. Django之 admin组件

    本节内容 路由系统 models模型 admin  views视图 template模板 Django Admin介绍 admin 是django 自带的用来让你进行数据库管理的web app. 提供 ...