使用JavaScript复制pc上kindle的文本

2022-01-22  本文已影响0人  SleepWalkerLj

在使用 Kindle PC 软件看电子书时,有时会复制里面的内容做一些笔记,但是Kindle PC 会自动附加书籍信息内容,并且复制的内容会有很多空格,于是用js写了个小工具。效果如下:


示例.png

使用很简单,先把书籍信息放到第一个文本框内,可以点击保存暂时存储。然后把从kindle复制的内容粘贴到第二个文本框,点击转换就会把正常的文本显示在最后一个文本框里,最后点击复制即可。

<!DOCTYPE html>
<html lang="zh_CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <div>
        <h3>请输入相同书信息</h3>
        <textarea v-model="bookInfo" rows="8" cols="50"></textarea>
        <button @click="save">保存</button>
      </div>
      <div>
        <h3>请输入要转换的内容</h3>
        <textarea v-model="content" rows="10" cols="50"></textarea>
        <button @click="change">转换</button>
        <button @click="remove">清除</button>
      </div>
      <div>
        <h3>转换之后的结果</h3>
        <textarea class="result" v-model="result" rows="8" cols="50"></textarea>
        <button class="copy" @click="copy">复制</button></button>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
      var app = new Vue({
        el: "#app",
        data() {
          return {
            message: "Hello Vue!",
            bookInfo: window.localStorage.getItem("bookInfo"),
            content: "",
            result: "",
          };
        },
        methods: {
          save() {
            window.localStorage.setItem("bookInfo", this.bookInfo);
          },
          change() {
            this.bookInfo=this.bookInfo.split("Kindle")[0]
            this.content=this.content.split("Kindle")[0]
            const temp = this.content.replace(this.bookInfo, "");
            this.result = temp.replace(/\s*/g, "");
          },
          remove(){
              this.content=""
          },
          copy(){
            const result=document.querySelector(".result");
            result.select()
            document.execCommand("copy")
          }
        },
      });
    </script>
  </body>
</html>

上一篇 下一篇

猜你喜欢

热点阅读