[巴哈]文字 to MD表格

將文字貼上轉換成Markdown語法的表格，方便在巴哈哈拉區回復文章，推薦用Hackmd。

by dpes5407

HTML

<script src="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css">
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
  <div id="app">
    <v-app>
      <v-main>
        <v-container>
          <!--form-->
          <v-form v-model="valid">
            <v-container>
              <v-row>
                <v-col cols="12" sm="3">
                  <v-text-field v-model="firstname" label="表格名稱" required></v-text-field>
                </v-col>

                <v-col cols="12" sm="3">
                  <v-text-field v-model="bahaId" label="巴哈id" required></v-text-field>
                </v-col>
                <v-divider></v-divider>
                <template>
                  <v-checkbox v-model="checkbox" :label="`加入超連結`"></v-checkbox>
                </template>
                <v-col cols="12" sm="2">
                  <v-btn @click="translate" color="primary" rounded large>
                    轉換
                  </v-btn>
                </v-col>

              </v-row>
            </v-container>
          </v-form>
          <!-- form end -->
          <br>
          <!--2-->
          <v-row>
            <v-col cols="12" sm="5">
              <v-textarea v-model="inputText" background-color="amber lighten-4" color="orange orange-darken-4" label="before" :placeholder="placeHolder"></v-textarea>
            </v-col>
            <v-col cols="12" sm="5" xs="2">
              <v-textarea id="testing-code" v-model="outputText" background-color="amber lighten-4" color="orange orange-darken-4" label="after">
              </v-textarea>

            </v-col>
            <v-col cols="12" sm="2" xs="2">
              <v-btn @click="copyText"...

JavaScript

new Vue({
      el: '#app',
      vuetify: new Vuetify(),
      data() {
        return {
        checkbox: true,
          placeHolder: `FRAMED Collection
We Need To Go Deeper
Out of Space
          `,
          valid: true,
          firstname: '我有的遊戲',
          nameRules: [
            v => !!v || 'Name is required',
            v => v.length <= 30 || '最多30',
          ],
          bahaId: 'a123',
          inputText: `Lacuna
Orwell: Ignorance is Strength
Heaven's Vault
FRAMED Collection
We Need To Go Deeper
Out of Space`,
          outputText: ``,
        }
      },
      methods: {
        translate() {
          //1.先去除多個\n
          let str = this.killN(this.inputText)
          let arr = []
          //2.split拿到陣列
          arr = str.split('\n')
          this.outputText = this.addHeader() + this.getColString(arr)

        },
        killN(str) {
          const regMultiN = /\n(\n)*( )*(\n)*\n/g
          let newStr = str.replace(regMultiN, '\n')
          //轉換後避免第一列是換行\n
          const r = /^(\n)*/g
          newStr = str.replace(r, '')
          return newStr
        },
        getColString(arr) {
          let str = ''
          for (let i = 0; i < arr.length; i++) {
            let item = arr[i]
            if (i % 3 === 0) str = str + '|'
            //3. embed url 預留不同模式
            if (this.checkbox) {
              item = this.embedUrl(arr[i])
            }
            str += item + '|'
            if (i % 3 === 2) str = str + "\n"
          }
          return str
        },
        embedUrl(str) {
          const reg = /\s/g
          const spl = str.replace(reg, '+')
          const ans = `[${str}](https://store.steampowered.com/search/?term=${spl})`
          return ans
        },
        addHeader() {
          const header = `| ${this.firstname}  |     | ${this.bahaId} |
| - | - | - |\n`
          return header
        },
        copyText() {
          const text = document.querySelector('#testing-code')
          text.select()
         ...