html编码 #68

README.md

@@ -77,6 +77,7 @@ npm run build -adapter=[chrome|edge|utools|firefox|web]
 |jwt解码|`header`, `payload`|√|
 |Hex/String转换|`hex to string`, `string to hex`, `十六进制转字符串`, `字符串转十六进制`|√|
 |文本处理|`大小写转换`, `中英文标点转换`, `简繁转换`, `替换`, `字符统计`, `行去重`, `添加行号`, `行排序`, `过滤行首尾不可见字符`,`过滤空行`|√|
+|html编码|`html编码`|√|
 
 ## 第三方开源库
 
@@ -116,5 +117,6 @@ npm run build -adapter=[chrome|edge|utools|firefox|web]
 - [jian_fan](https://www.npmjs.com/package/jian_fan)
 - [axios](https://www.npmjs.com/package/axios)
 - [monaco-editor](https://www.npmjs.com/package/monaco-editor)
+- [js-htmlencode](https://www.npmjs.com/package/js-htmlencode)
 
 > 当然项目中还使用很多不知道姓名的大神的代码, 在这里就不一一感谢

package-lock.json

@@ -6955,6 +6955,11 @@
       "resolved": "https://registry.npmjs.org/js-calendar/-/js-calendar-1.2.3.tgz",
       "integrity": "sha512-dAA1/Zbp4+c5E+ARCVTIuKepXsNLzSYfzvOimiYD4S5eeP9QuplSHLcdhfqFSwyM1o1u6ku6RRRCyaZ0YAjiBw=="
     },
+    "js-htmlencode": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/js-htmlencode/-/js-htmlencode-0.3.0.tgz",
+      "integrity": "sha1-sc4pPflOlviooIsfM2j5d70lVzE="
+    },
     "js-levenshtein": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/js-levenshtein/-/js-levenshtein-1.1.6.tgz",

package.json

 {
     "name": "c-tool",
-    "version": "1.8.0",
+    "version": "1.8.1",
     "private": true,
     "scripts": {
         "serve": "vue-cli-service serve --port 8081",
@@ -25,6 +25,7 @@
         "is-url": "^1.2.4",
         "jian_fan": "^1.0.3",
         "js-base64": "^2.6.4",
+        "js-htmlencode": "^0.3.0",
         "js-yaml": "^3.14.1",
         "json-to-properties": "^1.1.3",
         "jsonlint": "^1.6.3",

src/config.js

@@ -59,6 +59,7 @@ const tool = [
     {'name': 'jwt', 'title': 'JWT解码', 'cat': ['conversion']},
     {'name': 'hexString', 'title': 'Hex/String转换', 'cat': ['conversion']},
     {'name': 'text', 'title': '文本处理', 'cat': ['other']},
+    {'name': 'html', 'title': 'html编码', 'cat': ['conversion']},
 ]
 
 // 工具类功能配置

src/tool.router.js

@@ -133,6 +133,10 @@ const routes = [
     {
         path: '/tool/text',
         component: r => require(['./views/tool/text.vue'], r)
+    },
+    {
+        path: '/tool/html',
+        component: r => require(['./views/tool/html.vue'], r)
     }
 ]
 
@@ -144,4 +148,4 @@ router.afterEach(to => {
     stat('tool', {tool: to.path})
 })
 
-export default router
\ No newline at end of file
+export default router

src/views/tool/html.vue

+<template>
+    <div>
+        <Input v-model="current.input" :rows="7" type="textarea" placeholder="内容"></Input>
+        <option-block>
+            <FormItem>
+                <ButtonGroup>
+                    <Button type="primary" @click="handle('encode')">编码</Button>
+                    <Button type="primary" @click="handle('decode')">解密</Button>
+                </ButtonGroup>
+            </FormItem>
+        </option-block>
+        <Input v-model="current.output" :rows="7" type="textarea" placeholder="结果"></Input>
+    </div>
+</template>
+<script>
+
+export default {
+    created() {
+        this.current = Object.assign(this.current, this.$getToolData("input"))
+    },
+    methods: {
+        handle(v) {
+            if (this.current.input) {
+                if (v === "encode") {
+                    this.current.output = require('js-htmlencode').htmlEncode(this.current.input);
+                } else {
+                    this.current.output = require('js-htmlencode').htmlDecode(this.current.input);
+                }
+                this.current.operation = v;
+                this.$clipboardCopy(this.current.output);
+                this.$saveToolData(this.current);
+            }
+        }
+    },
+    data() {
+        return {
+            current: {
+                input: "",
+                output: "",
+                operation: ""
+            }
+        }
+    },
+}
+</script>