完成中文/utf-8编码互转

Author: lizl6

README.md

@@ -8,7 +8,7 @@
 
 - [x] 中文/ASCii互转
 
-- [ ] 中文/UTF-8互转
+- [x] 中文/UTF-8互转
 
 - [ ] AES/DES加解密
 
@@ -50,6 +50,14 @@ npm run build-dist:win
 
 # 截图
 
+## 中文/ASCii编码
+
 ![image-20220913152703258](https://imgbd.r-xnoro.com//image-20220913152703258.png)
 
+## 中文/UTF-8编码
+
+![image-20220913162817293](https://imgbd.r-xnoro.com//image-20220913162817293.png)
+
+## 随机数/密码生成器
+
 ![image-20220913152551500](https://imgbd.r-xnoro.com//image-20220913152551500.png)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "coderbox",
-  "version": "1.0.0",
+  "version": "1.0.5",
   "description": "基于electron的跨平台的程序员小工具集",
   "main": "main.js",
   "scripts": {

src/component/ascii.html

@@ -6,8 +6,7 @@
     </div>
     <div class="row pt-2">
         <div class="col-1 text-end">中文：</div>
-        <div class="col"><textarea class="form-control" style="resize:none;" v-model="strNative" cols="30"
-                rows="10"></textarea></div>
+        <div class="col"><textarea class="form-control" style="resize:none;" v-model="strNative" cols="30" rows="10"></textarea></div>
     </div>
     <div class="row mt-3">
         <div class="col-1"></div>
@@ -18,8 +17,7 @@
     </div>
     <div class="row mt-3">
         <div class="col-1 text-end">ASCii：</div>
-        <div class="col"><textarea class="form-control" style="resize:none;" v-model="strAscii" cols="30"
-                rows="10">{{strAscii}}</textarea></div>
+        <div class="col"><textarea class="form-control" style="resize:none;" v-model="strAscii" cols="30" rows="10"></textarea></div>
     </div>
 </div>
 <script src="../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
@@ -85,9 +83,7 @@
         code <<= 4;
         code += cc;
     }
-
     if (code < 0xff) return str;
-
     return String.fromCharCode(code);
 }
 

src/component/utf8.html

@@ -0,0 +1,47 @@
+<link rel="stylesheet" href="../index.css">
+<link rel="stylesheet" href="../../node_modules/bootstrap/dist/css/bootstrap.min.css">
+<div class="container-fluid" id="app">
+    <div class="card bg-light text-gray">
+        <div class="card-head text-muted">中文/UTF-8编码互转</div>
+    </div>
+    <div class="row pt-2">
+        <div class="col-1 text-end">中文：</div>
+        <div class="col"><textarea class="form-control" style="resize:none;" v-model="strNative" cols="30" rows="10"></textarea></div>
+    </div>
+    <div class="row mt-3">
+        <div class="col-1"></div>
+        <div class="col">
+            <button type="button" class="btn btn-primary" @click="n2u">中文转UTF-8编码⇩</button>
+            <button type="button" class="btn btn-primary" style="margin-left:15px;" @click="u2n">UTF-8编码转中文⇧</button>
+        </div>
+    </div>
+    <div class="row mt-3">
+        <div class="col-1 text-end text-nowrap">UTF-8编码：</div>
+        <div class="col"><textarea class="form-control" style="resize:none;" v-model="strUTF8" cols="30" rows="10"></textarea></div>
+    </div>
+</div>
+<script src="../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
+<script src="../../node_modules/vue/dist/vue.global.prod.js"></script>
+<script>
+const app = {
+    data() {
+        return {
+            strNative: '',
+            strUTF8: ''
+        }
+    },
+    methods: {
+        n2u() {
+            if(this.strNative == '') return;
+            this.strUTF8 = this.strNative.replace(/[^\u0000-\u00FF]/g, ($0) => {
+                return escape($0).replace(/(%u)(\w{4})/gi, "&#x$2;");
+            });
+        },
+        u2n() {
+            if(this.strUTF8 == '') return;
+            this.strNative = unescape(this.strUTF8.replace(/&#x/g, '%u').replace(/;/g, ''));
+        }
+    }
+}
+Vue.createApp(app).mount('#app');
+</script>

src/index.html

@@ -14,20 +14,20 @@
             <div class="collapse navbar-collapse">
                 <ul class="navbar-nav">
                     <li class="nav-item">
-                        <a href="#" @click="to('welcome')" class="nav-link">首页</a>
+                        <a href="#" class="nav-link" @click="to('welcome')">首页</a>
                     </li>
                     <li class="nav-item dropdown">
                         <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">编码/加密</a>
                         <div class="dropdown-menu">
-                            <a href="#" @click="to('ascii')" class="dropdown-item">中文/ASCii互转</a>
-                            <a href="#" class="dropdown-item">中文/UTF-8互转</a>
+                            <a href="#" class="dropdown-item" @click="to('ascii')">中文/ASCii互转</a>
+                            <a href="#" class="dropdown-item" @click="to('utf8')">中文/UTF-8互转</a>
                             <a href="#" class="dropdown-item">Base64编码/解码</a>
                             <a href="#" class="dropdown-item">MD5、SHA加密</a>
                             <a href="#" class="dropdown-item">AES/DES加解密</a>
                         </div>
                     </li>
                     <li class="nav-item">
-                        <a href="#" @click="to('pwd')" class="nav-link">随机数/密码生成器</a>
+                        <a href="#" class="nav-link" @click="to('pwd')">随机数/密码生成器</a>
                     </li>
                 </ul>
             </div>

src/index.js

@@ -16,6 +16,11 @@ const app = {
                     name: 'ascii',
                     path: './component/ascii.html',
                     state: 0
+                },
+                {
+                    name: 'utf8',
+                    path: './component/utf8.html',
+                    state: 0
                 }
             ],
             dataPwd: {