求助这段代码如何转换成正常可看的HTML页面

zoenbo · 发表于 2020-10-12 13:57

JS是放在这个HTML页面里，但是JS完全是乱的，从HTML打开后，每个字都是单独的不能大范围复制，如何实现不用JS，直接能打看就能看呢？
HTML页面

[HTML] 纯文本查看 复制代码

<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>chapter-1</title>

    <style>
        @page {
            margin: 0;
            padding: 0;
            size: 5in 6.674in;
        }
        html, body {
            padding: 0;
            margin: 0;
        }
        body {
            background-color: #44454A;
        }
        .read-box {
            width: 660px;
            margin: 0 auto;
        }
        .read-box .read-item {
            height: 880px;
            position: relative;
            background-color: #fff;
        }
        .read-box.read-mode .read-item  {
            margin-bottom: 10px;
        }
        .button {
            position: fixed;
            left: 50%;
            top: 200px;
            margin-left: -460px;
            text-align: right;
        }
        .button button {
            margin-bottom: 6px;
        }
    </style>
</head>
<body>

<div id="app">
    <div class="read-box" :class="mode">
        <div class="chapter-wrap">
            <div
                class="read-item"
                v-for="(item2, index) in book"
                v-html="item2.chapterInfo.snippet"
                :key="index">
            </div>
        </div>
    </div>

    <div class="button">
        <div>
            <button @click="print" v-show="mode === 'read-mode'">打印/另存pdf</button>
        </div>
        <div>
            <button @click="readMode" v-show="mode === 'print-mode'">阅读模式</button>
        </div>
    </div>
</div>

</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.min.js"></script>
<script src="./data/chapter-1.js"></script>
<script>
  window.book.children.forEach((item)=>{
    item.chapterInfo = JSON.parse(item.chapterInfo)
  })
  new Vue({
    el: '#app',
    data() {
      return {
        book: window.book.children || [],
        mode: 'read-mode'
      }
    },
    methods: {
      print() {
        this.mode = 'print-mode'

        setTimeout(()=>{
          window.print()
        }, 300)
      },
      readMode() {
        this.mode = 'read-mode'
      }
    }
  })
</script>
</html>

JS
window.book = {"chapterID":1,"originalChapterID":0,"pageCount":1,"pagenum":2,"children":[{"chapter":{},"chapterInfo":"{\"status\":\"ok\",\"code\":0,\"pageType\":0,\"snippet\":\"<div class=\\\"wraper\\\" style=\\\"width: 660px; height: 880px; position: absolute; left:0px; top:0px; overflow: hidden; \\\">\\n<div class=\\\"text\\\" style=\\\"width: 660px; height: 880px; position: absolute; left:0px; top:0px;\\\">\\n<div><style type=\\\"text/css\\\">\\n.fs-2146a648-4 {\\nfont-size:17px;\\n font-family:'Microsoft Yahei';\\n color:#28363e;\\n position:absolute;\\n} \\n.fs-2146a648-a {\\nfont-size:17px;\\n font-family:Arial;\\n color:#28363e;\\n position:absolute;\\n} \\n.fs-2146a648-0 {\\nfont-size:26px;\\n font-family:'Microsoft Yahei';\\n font-weight: 500;\\n color:#28363e;\\n position:absolute;\\n} \\n<\\/style>。<\\/span>\\n东<\\/span>\\n：<\\/span>\\n版<\\/span>\\n当<\\/span>\\n <\\/span>\\n分<\\/span>\\n类<\\/span>\\n用<\\/span>\\ng<\\/span>\\n9<\\/span>\\n江<\\/span>\\n公<\\/span>\\n时<\\/span>\\n限<\\/span>\\n5<\\/span>\\n传<\\/span>\\n0<\\/span>\\n限<\\/span>\\n北<\\/span>\\n者<\\/span>\\n出<\\/span>\\n敏<\\/span>\\n词<\\/span>\\n本<\\/span>\\n·<\\/span>\\n·<\\/span>\\n-<\\/span>\\n商<\\/span>\\nt<\\/span>\\nB<\\/span>\\n7<\\/span>\\n教<\\/span>\\n5<\\/span>\\n北<\\/span>\\ni<\\/span>\\n4<\\/span>\\n浙<\\/span>\\n电<\\/span>\\n版<\\/span>\\na<\\/span>\\n文<\\/span>\\n书<\\/span>\\n发<\\/span>\\n排<\\/span>\\n版<\\/span>\\n息<\\/span>\\n司<\\/span>\\n有<\\/span>\\n务<\\/span>\\n0<\\/span>\\n大<\\/span>\\n-<\\/span>\\n京<\\/span>\\n新<\\/span>\\n8<\\/span>\\n播<\\/span>\\n <\\/span>\\n <\\/span>\\n7<\\/span>\\n侵<\\/span>\\nS<\\/span>\\n2<\\/span>\\n与<\\/span>\\n必<\\/span>\\n版<\\/span>\\n0<\\/span>\\nS<\\/span>\\n0<\\/span>\\nK<\\/span>\\n有<\\/span>\\n出<\\/span>\\n司<\\/span>\\n公<\\/span>\\n1<\\/span>\\n：<\\/span>\\n <\\/span>\\n所<\\/span>\\n授<\\/span>\\n实<\\/span>\\n出<\\/span>\\n当<\\/span>\\n行<\\/span>\\n制<\\/span>\\n7<\\/span>\\n—<\\/span>\\n作<\\/span>\\n4<\\/span>\\n：<\\/span>\\n超<\\/span>\\n记<\\/span>\\n权<\\/span>\\n7<\\/span>\\n—<\\/span>\\n书<\\/span>\\n名<\\/span>\\n愚<\\/span>\\n权<\\/span>\\nI<\\/span>\\n0<\\/span>\\n由<\\/span>\\n版<\\/span>\\n间<\\/span>\\n社<\\/span>\\n6<\\/span>\\n京<\\/span>\\n1<\\/span>\\n：<\\/span>\\n方<\\/span>\\n科<\\/span>\\n育<\\/span>\\n <\\/span>\\n速<\\/span>\\n信<\\/span>\\nr<\\/span>\\n版<\\/span>\\n文<\\/span>\\nN<\\/span>\\n1<\\/span>\\n5<\\/span>\\n5<\\/span>\\n6<\\/span>\\n作<\\/span>\\n化<\\/span>\\n权<\\/span>\\n3<\\/span>\\n：<\\/span>\\n俞<\\/span>\\n社<\\/span>\\n有<\\/span>\\nn<\\/span>\\n究<\\/span>\\n0<\\/span>\\n：<\\/span>\\n1<\\/span>\\n洪<\\/span>\\n子<\\/span>\\n权<\\/span>\\n<\\/div>\\n<\\/div>\\n<\\/div>\\n\"}","systemDate":"1602480670172","currentDate":"2020-10-12 13:31:10","wordSize":2}]}

blankspace · 发表于 2020-10-12 14:21

正则提取一下

virgin_8 · 发表于 2020-10-12 14:43

等内行人解决问题，学习一下。

jidesheng6 · 发表于 2020-10-12 15:06


<div class="wraper" style="width: 660px; height: 880px; position: absolute; left:0px; top:0px; overflow: hidden; "><div class="text" style="width: 660px; height: 880px; position: absolute; left:0px; top:0px;"><div><style type="text/css">.fs-2146a648-4 {font-size:17px; font-family:'Microsoft Yahei';  color:#28363e; position:absolute;} .fs-2146a648-a {font-size:17px; font-family:Arial;  color:#28363e; position:absolute;} .fs-2146a648-0 {font-size:26px; font-family:'Microsoft Yahei'; font-weight: 500; color:#28363e; position:absolute;} </style><span class="fs-2146a648-4" style="left:147px; bottom:483px; ">。</span><span class="fs-2146a648-4" style="left:148px; bottom:513px; ">东</span><span class="fs-2146a648-4" style="left:79px; bottom:649px; ">：</span><span class="fs-2146a648-4" style="left:62px; bottom:649px; ">版</span><span class="fs-2146a648-4" style="left:442px; bottom:513px; ">当</span><span class="fs-2146a648-a" style="left:328px; bottom:435px; "> </span><span class="fs-2146a648-4" style="left:209px; bottom:708px; ">分</span><span class="fs-2146a648-4" style="left:226px; bottom:708px; ">类</span><span class="fs-2146a648-4" style="left:130px; bottom:708px; ">用</span><span class="fs-2146a648-a" style="left:119px; bottom:649px; ">g</span><span class="fs-2146a648-a" style="left:100px; bottom:561px; ">9</span><span class="fs-2146a648-4" style="left:130px; bottom:619px; ">江</span><span class="fs-2146a648-4" style="left:321px; bottom:513px; ">公</span><span class="fs-2146a648-4" style="left:79px; bottom:590px; ">时</span><span class="fs-2146a648-4" style="left:580px; bottom:513px; ">限</span><span class="fs-2146a648-a" style="left:172px; bottom:561px; ">5</span><span class="fs-2146a648-4" style="left:252px; bottom:513px; ">传</span><span class="fs-2146a648-a" style="left:183px; bottom:708px; ">0</span><span class="fs-2146a648-4" style="left:304px; bottom:513px; ">限</span><span class="fs-2146a648-4" style="left:390px; bottom:513px; ">北</span><span class="fs-2146a648-4" style="left:62px; bottom:678px; ">者</span><span class="fs-2146a648-4" style="left:181px; bottom:619px; ">出</span><span class="fs-2146a648-4" style="left:113px; bottom:678px; ">敏</span><span class="fs-2146a648-4" style="left:192px; bottom:708px; ">词</span><span class="fs-2146a648-4" style="left:45px; bottom:513px; ">本</span><span class="fs-2146a648-a" style="left:404px; bottom:435px; ">·</span><span class="fs-2146a648-a" style="left:251px; bottom:435px; ">·</span><span class="fs-2146a648-a" style="left:189px; bottom:590px; ">-</span><span class="fs-2146a648-4" style="left:528px; bottom:513px; ">商</span><span class="fs-2146a648-a" style="left:139px; bottom:649px; ">t</span><span class="fs-2146a648-a" style="left:60px; bottom:561px; ">B</span><span class="fs-2146a648-a" style="left:180px; bottom:590px; ">7</span><span class="fs-2146a648-4" style="left:147px; bottom:619px; ">教</span><span class="fs-2146a648-a" style="left:136px; bottom:561px; ">5</span><span class="fs-2146a648-4" style="left:96px; bottom:513px; ">北</span><span class="fs-2146a648-a" style="left:107px; bottom:649px; ">i</span><span class="fs-2146a648-a" style="left:190px; bottom:561px; ">4</span><span class="fs-2146a648-4" style="left:113px; bottom:619px; ">浙</span><span class="fs-2146a648-4" style="left:494px; bottom:513px; ">电</span><span class="fs-2146a648-4" style="left:62px; bottom:619px; ">版</span><span class="fs-2146a648-a" style="left:143px; bottom:649px; ">a</span><span class="fs-2146a648-4" style="left:217px; bottom:513px; ">文</span><span class="fs-2146a648-4" style="left:62px; bottom:513px; ">书</span><span class="fs-2146a648-4" style="left:113px; bottom:483px; ">发</span><span class="fs-2146a648-4" style="left:45px; bottom:649px; ">排</span><span class="fs-2146a648-0" style="left:45px; bottom:754px; ">版</span><span class="fs-2146a648-0" style="left:123px; bottom:754px; ">息</span><span class="fs-2146a648-4" style="left:338px; bottom:513px; ">司</span><span class="fs-2146a648-4" style="left:311px; bottom:435px; ">有</span><span class="fs-2146a648-4" style="left:546px; bottom:513px; ">务</span><span class="fs-2146a648-a" style="left:194px; bottom:590px; ">0</span><span class="fs-2146a648-4" style="left:183px; bottom:513px; ">大</span><span class="fs-2146a648-a" style="left:166px; bottom:590px; ">-</span><span class="fs-2146a648-4" style="left:407px; bottom:513px; ">京</span><span class="fs-2146a648-4" style="left:131px; bottom:513px; ">新</span><span class="fs-2146a648-a" style="left:118px; bottom:561px; ">8</span><span class="fs-2146a648-4" style="left:269px; bottom:513px; ">播</span><span class="fs-2146a648-a" style="left:400px; bottom:435px; "> </span><span class="fs-2146a648-a" style="left:256px; bottom:435px; "> </span><span class="fs-2146a648-a" style="left:109px; bottom:561px; ">7</span><span class="fs-2146a648-4" style="left:332px; bottom:435px; ">侵</span><span class="fs-2146a648-a" style="left:128px; bottom:649px; ">S</span><span class="fs-2146a648-a" style="left:130px; bottom:590px; ">2</span><span class="fs-2146a648-4" style="left:96px; bottom:483px; ">与</span><span class="fs-2146a648-4" style="left:366px; bottom:435px; ">必</span><span class="fs-2146a648-4" style="left:62px; bottom:590px; ">版</span><span class="fs-2146a648-a" style="left:171px; bottom:590px; ">0</span><span class="fs-2146a648-a" style="left:49px; bottom:561px; ">S</span><span class="fs-2146a648-a" style="left:174px; bottom:708px; ">0</span><span class="fs-2146a648-a" style="left:96px; bottom:649px; ">K</span><span class="fs-2146a648-4" style="left:286px; bottom:513px; ">有</span><span class="fs-2146a648-4" style="left:45px; bottom:590px; ">出</span><span class="fs-2146a648-4" style="left:45px; bottom:483px; ">司</span><span class="fs-2146a648-4" style="left:598px; bottom:513px; ">公</span><span class="fs-2146a648-a" style="left:208px; bottom:561px; ">1</span><span class="fs-2146a648-4" style="left:79px; bottom:708px; ">：</span><span class="fs-2146a648-a" style="left:409px; bottom:435px; "> </span><span class="fs-2146a648-4" style="left:294px; bottom:435px; ">所</span><span class="fs-2146a648-4" style="left:356px; bottom:513px; ">授</span><span class="fs-2146a648-4" style="left:113px; bottom:708px; ">实</span><span class="fs-2146a648-4" style="left:45px; bottom:619px; ">出</span><span class="fs-2146a648-4" style="left:425px; bottom:513px; ">当</span><span class="fs-2146a648-4" style="left:130px; bottom:483px; ">行</span><span class="fs-2146a648-4" style="left:62px; bottom:483px; ">制</span><span class="fs-2146a648-a" style="left:157px; bottom:590px; ">7</span><span class="fs-2146a648-4" style="left:413px; bottom:435px; ">—</span><span class="fs-2146a648-4" style="left:79px; bottom:483px; ">作</span><span class="fs-2146a648-a" style="left:181px; bottom:561px; ">4</span><span class="fs-2146a648-4" style="left:113px; bottom:590px; ">：</span><span class="fs-2146a648-4" style="left:96px; bottom:708px; ">超</span><span class="fs-2146a648-4" style="left:260px; bottom:708px; ">记</span><span class="fs-2146a648-4" style="left:277px; bottom:435px; ">权</span><span class="fs-2146a648-a" style="left:127px; bottom:561px; ">7</span><span class="fs-2146a648-4" style="left:229px; bottom:435px; ">—</span><span class="fs-2146a648-4" style="left:45px; bottom:708px; ">书</span><span class="fs-2146a648-4" style="left:62px; bottom:708px; ">名</span><span class="fs-2146a648-4" style="left:200px; bottom:513px; ">愚</span><span class="fs-2146a648-4" style="left:349px; bottom:435px; ">权</span><span class="fs-2146a648-a" style="left:45px; bottom:561px; ">I</span><span class="fs-2146a648-a" style="left:165px; bottom:708px; ">0</span><span class="fs-2146a648-4" style="left:79px; bottom:513px; ">由</span><span class="fs-2146a648-4" style="left:198px; bottom:619px; ">版</span><span class="fs-2146a648-4" style="left:96px; bottom:590px; ">间</span><span class="fs-2146a648-4" style="left:79px; bottom:619px; ">社</span><span class="fs-2146a648-a" style="left:199px; bottom:561px; ">6</span><span class="fs-2146a648-4" style="left:114px; bottom:513px; ">京</span><span class="fs-2146a648-a" style="left:203px; bottom:590px; ">1</span><span class="fs-2146a648-4" style="left:83px; bottom:561px; ">：</span><span class="fs-2146a648-4" style="left:165px; bottom:513px; ">方</span><span class="fs-2146a648-4" style="left:459px; bottom:513px; ">科</span><span class="fs-2146a648-4" style="left:164px; bottom:619px; ">育</span><span class="fs-2146a648-a" style="left:247px; bottom:435px; "> </span><span class="fs-2146a648-4" style="left:243px; bottom:708px; ">速</span><span class="fs-2146a648-0" style="left:97px; bottom:754px; ">信</span><span class="fs-2146a648-a" style="left:152px; bottom:649px; ">r</span><span class="fs-2146a648-4" style="left:260px; bottom:435px; ">版</span><span class="fs-2146a648-4" style="left:477px; bottom:513px; ">文</span><span class="fs-2146a648-a" style="left:71px; bottom:561px; ">N</span><span class="fs-2146a648-a" style="left:147px; bottom:708px; ">1</span><span class="fs-2146a648-a" style="left:145px; bottom:561px; ">5</span><span class="fs-2146a648-a" style="left:156px; bottom:708px; ">5</span><span class="fs-2146a648-a" style="left:163px; bottom:561px; ">6</span><span class="fs-2146a648-4" style="left:45px; bottom:678px; ">作</span><span class="fs-2146a648-4" style="left:235px; bottom:513px; ">化</span><span class="fs-2146a648-0" style="left:71px; bottom:754px; ">权</span><span class="fs-2146a648-a" style="left:154px; bottom:561px; ">3</span><span class="fs-2146a648-4" style="left:79px; bottom:678px; ">：</span><span class="fs-2146a648-4" style="left:96px; bottom:678px; ">俞</span><span class="fs-2146a648-4" style="left:215px; bottom:619px; ">社</span><span class="fs-2146a648-4" style="left:563px; bottom:513px; ">有</span><span class="fs-2146a648-a" style="left:110px; bottom:649px; ">n</span><span class="fs-2146a648-4" style="left:383px; bottom:435px; ">究</span><span class="fs-2146a648-a" style="left:139px; bottom:590px; ">0</span><span class="fs-2146a648-4" style="left:96px; bottom:619px; ">：</span><span class="fs-2146a648-a" style="left:148px; bottom:590px; ">1</span><span class="fs-2146a648-4" style="left:130px; bottom:678px; ">洪</span><span class="fs-2146a648-4" style="left:511px; bottom:513px; ">子</span><span class="fs-2146a648-4" style="left:373px; bottom:513px; ">权</span></div></div></div>"}

发飙的熊猫君 · 发表于 2020-10-12 15:07

给你解析了一下，链接https://wwe.lanzouj.com/iwoTChd4e4h
希望对你有所帮助

发飙的熊猫君 · 发表于 2020-10-12 15:08

下载了之后把后缀改成json就可以了，蓝奏不能上传json文件

zoenbo · 发表于 2020-10-12 15:10

jidesheng6 发表于 2020-10-12 15:06
[md]```javascript

.fs-2146a648-4 {font-size:17px; font-family:'Microsoft Yahei'; color:#28363e; ...

对，就是要这种结果，大佬，什么方法可以批量转换呢

zoenbo · 发表于 2020-10-12 15:15

发飙的熊猫君发表于 2020-10-12 15:07
给你解析了一下，链接https://wwe.lanzouj.com/iwoTChd4e4h
希望对你有所帮助

有办法能转换成HTML标记的这种代码吗

jidesheng6 · 发表于 2020-10-12 15:31

zoenbo 发表于 2020-10-12 15:10
对，就是要这种结果，大佬，什么方法可以批量转换呢

看楼下，有方案的

zoenbo · 发表于 2020-10-12 15:38

Summer大大发表于 2020-10-12 15:14
[mw_shl_code=csharp,true] string js = File.ReadAllText("a.js");
List txts = ...

大佬，这是批处理还是什么语言呢，我不知道怎么操作，请恕小弟愚笨

帐号		自动登录	找回密码
密码			注册[Register]

[求助] 求助这段代码如何转换成正常可看的HTML页面

免费评分