Add sed generator tool

src/components/Sidebar.vue

@@ -44,6 +44,7 @@ export default {
         'file_base64_encode_decode': 'File base64 encode/decode',
         'qr_code': 'QR code',
         'unix_timestamp': 'Unix timestamp',
+        'sed_generator': 'Sed generator',
       },
       'Strings': {
         'fix_ru_en_keyboard': 'Fix ru-en keyboard',

src/router/index.js

@@ -51,6 +51,11 @@ const router = createRouter({
 			name: 'file_base64_encode_decode',
 			component: () => import('../views/general/FileBase64EncodeDecode.vue'),
 		},
+		{
+			path: '/sed_generator',
+			name: 'sed_generator',
+			component: () => import('../views/general/SedGenerator.vue'),
+		},
 
 		/**
 		 * String manipulation

src/views/general/SedGenerator.vue

@@ -0,0 +1,87 @@
+<template>
+  <h2 class="tool-title">Sed Generator</h2>
+  <hr class="mt-5 mb-5">
+
+  <div class="input-group">
+    <label for="search">Search</label>
+    <input id="search" class="input" v-model="toolData.search" v-on:keyup="result" type="text">
+  </div>
+
+  <div class="input-group">
+    <label for="replace">Replace</label>
+    <input id="replace" class="input" v-model="toolData.replace" v-on:keyup="result" type="text">
+  </div>
+
+  <div class="input-group">
+    <label for="delimiter">Delimiter</label>
+    <input id="delimiter" class="input" maxlength="1" v-model="toolData.delimiter" v-on:keyup="result" type="text">
+  </div>
+
+  <div class="input-group">
+    <label for="filename">Filename</label>
+    <input id="filename" class="input" v-model="toolData.filename" v-on:keyup="result" type="text">
+  </div>
+
+  <div class="input-group">
+    <div>
+      <input id="do_replace" type="checkbox" v-model="toolData.doReplace" v-on:change="result">
+      <label for="do_replace"> replace in file</label>
+    </div>
+  </div>
+
+  <hr class="mt-5 mb-5">
+
+  <div class="input-group">
+    <label for="result">Result</label>
+    <MonacoEditor name="result" language="bash" :value="toolResult"></MonacoEditor>
+  </div>
+</template>
+
+<script>
+import MonacoEditor from "@/components/MonacoEditor.vue";
+
+export default {
+  components: {
+    MonacoEditor
+  },
+  data() {
+    return {
+      toolData: {
+        search: "",
+        replace: "",
+        delimiter: "/",
+        filename: "/path/to/file",
+        doReplace: true,
+      },
+      toolResult: "",
+    };
+  },
+  mounted() {
+    this.result();
+  },
+  methods: {
+    result() {
+      if (!(this.toolData.search && this.toolData.replace && this.toolData.delimiter)) {
+        this.toolResult = '';
+        return
+      }
+
+      let command = `sed`;
+      if (this.toolData.doReplace) {
+        command += ` -i`;
+      }
+
+      // Escape delimiter
+      const search = this.toolData.search.replace(new RegExp(`\\${this.toolData.delimiter}`, 'g'), `\\${this.toolData.delimiter}`);
+      const replace = this.toolData.replace.replace(new RegExp(`\\${this.toolData.delimiter}`, 'g'), `\\${this.toolData.delimiter}`);
+
+      command += ` 's${this.toolData.delimiter}${search}${this.toolData.delimiter}${replace}${this.toolData.delimiter}g' ${this.toolData.filename}`;
+      this.toolResult = command;
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+
+</style>