Bagaimana untuk melaksanakan kotak alat ungkapan biasa menggunakan Vue?

Sebagai alat padanan corak yang berkuasa, ungkapan biasa (Ungkapan Biasa) digunakan secara meluas dalam senario seperti pemprosesan teks dan pengesahan borang. Dalam pembangunan bahagian hadapan berdasarkan Vue, kita selalunya perlu menggunakan ungkapan biasa untuk menyelesaikan beberapa tugas, seperti pengesahan borang, pemprosesan rentetan, dsb.

Untuk menggunakan ungkapan biasa dengan lebih mudah, kami boleh menyepadukannya ke dalam aplikasi Vue kami dengan merangkum komponen kotak alat ungkapan biasa. Artikel ini akan memperkenalkan cara menggunakan Vue untuk melaksanakan kotak alat ungkapan biasa yang ringkas dan menyediakan beberapa contoh kod untuk membantu pembaca bermula dengan cepat.

Idea pelaksanaan

Kotak alat ungkapan biasa perlu mempunyai fungsi berikut:

• Sokong pengguna untuk memasukkan ungkapan biasa dan rentetan sasaran
• Paparkan hasil padanan ungkapan biasa, dan sediakan padanan global pilihan dan abaikan kes dan pilihan lain;
• Menyediakan templat ungkapan biasa yang biasa digunakan dan peraturan penggantian yang dipratentukan;
• menyokong peraturan penggantian yang ditentukan pengguna.

Untuk melaksanakan fungsi ini, kita perlu menggunakan keupayaan pembangunan komponen Vue dan API ekspresi biasa.

Secara khusus, kita boleh menganggap keseluruhan kotak alat sebagai komponen Vue, yang mengandungi komponen borang, komponen senarai hasil, komponen tab (untuk menukar templat ungkapan biasa dan peraturan penggantian), dan beberapa butang dan input Komponen asas seperti bingkai. Dalam komponen, kita boleh memanggil API ungkapan biasa untuk dipadankan dan digantikan dengan mendengar acara seperti input dan pilihan pengguna serta memaparkan butiran padanan berdasarkan keputusan.

Contoh kod

Berikut ialah contoh pelaksanaan mudah kotak alat ungkapan biasa Vue. Masa khusus perlu diselaraskan berdasarkan keperluan projek sebenar.

Komponen Ungkapan Biasa

Komponen ungkapan biasa terutamanya termasuk kotak input teks dan kotak lungsur untuk memilih templat ungkapan biasa yang biasa digunakan.

<template>
  <div class="regex-component">
    <input type="text" placeholder="请输入正则表达式" v-model="regex">
    <select v-model="template" @change="applyTemplate">
      <option v-for="(value, name) in templates" :value="value">{{ name }}</option>
    </select>
  </div>
</template>

<script>
export default {
  name: 'RegexComponent',
  props: {
    value: String, // 当前正则表达式
  },
  data() {
    return {
      regex: this.value || '', // 当前正则表达式
      template: '', // 当前选择的模板名称
      templates: { // 常用正则表达式模板
        '整数': '^\d+$',
        '浮点数': '^\d+(\.\d+)?$',
        '电子邮箱': '^\w+([-+.]w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$',
      },
    };
  },
  methods: {
    // 应用选择的模板
    applyTemplate() {
      this.regex = this.templates[this.template] || '';
      this.$emit('input', this.regex);
    },
  },
};
</script>

<style scoped>
.regex-component {
  display: flex;
  align-items: center;
}

select {
  margin-left: 10px;
}
</style>

Komponen senarai keputusan

Komponen senarai keputusan digunakan terutamanya untuk memaparkan hasil padanan biasa. Ia menerima tatasusunan rentetan sebagai hasil yang sepadan, dan berulang melalui item senarai yang dipaparkan.

<template>
  <div>
    <h2>{{title}}</h2>
    <ul>
      <li v-for="(item, index) in items" :key="index">{{item}}</li>
      <li v-if="items.length === 0">无匹配结果</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'ResultListComponent',
  props: {
    title: String, // 列表标题
    items: Array, // 列表项
  },
};
</script>

Komponen tab

Komponen tab digunakan untuk memaparkan templat ekspresi biasa dan peraturan penggantian.

<template>
  <div>
    <ul>
      <li :class="{'active': mode === 'pattern'}" @click="setMode('pattern')">正则表达式模板</li>
      <li :class="{'active': mode === 'replace'}" @click="setMode('replace')">替换规则</li>
    </ul>
    <div v-show="mode === 'pattern'">
      <slot name="templates"></slot>
    </div>
    <div v-show="mode === 'replace'">
      <slot name="replace-rules"></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TabComponent',
  data() {
    return {
      mode: 'pattern', // 当前选中的选项卡
    };
  },
  methods: {
    // 切换选项卡
    setMode(mode) {
      this.mode = mode;
    },
  },
};
</script>

<style scoped>
ul {
  display: flex;
  justify-content: space-around;
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  cursor: pointer;
}

li.active {
  color: #f00;
}
</style>

Komponen kotak alat ekspresi biasa lengkap

Akhir sekali, kami menggabungkan komponen di atas untuk melaksanakan komponen kotak alat ekspresi biasa yang lengkap dan mengeksportnya untuk digunakan oleh komponen Vue yang lain. Dalam pelaksanaan, kami akan menggunakan kaedah RegExp 构造函数和 String 原型上的 match() 和 replace() untuk padanan dan penggantian.

<template>
  <div class="regex-toolbox">
    <RegexComponent v-model="pattern"></RegexComponent>
    <textarea rows="10" placeholder="请输入目标字符串" v-model="target"></textarea>
    <TabComponent>
      <template v-slot:templates>
        <ul>
          <li v-for="(pattern, name) in predefinedPatterns" :key="name">
            <a href="#" @click.prevent="applyPattern(pattern)">{{ name }}</a>
          </li>
        </ul>
      </template>
      <template v-slot:replace-rules>
        <div>
          <p>查找：</p>
          <input type="text" v-model="search" placeholder="请输入查找内容"/>
          <p>替换为：</p>
          <input type="text" v-model="replace" placeholder="请输入替换内容"/>
        </div>
      </template>
    </TabComponent>
    <button @click="doMatch">匹配</button>
    <button @click="doReplace">替换</button>
    <ResultListComponent title="匹配结果" :items="matches"></ResultListComponent>
    <ResultListComponent title="替换结果" :items="replacements"></ResultListComponent>
  </div>
</template>

<script>
import RegexComponent from './RegexComponent';
import TabComponent from './TabComponent';
import ResultListComponent from './ResultListComponent';

export default {
  name: 'RegexToolbox',
  components: {
    RegexComponent,
    TabComponent,
    ResultListComponent,
  },
  data() {
    return {
      pattern: '', // 当前正则表达式
      target: '', // 当前目标字符串
      options: { // 匹配选项
        global: false,
        ignoreCase: false,
      },
      predefinedPatterns: { // 常用正则表达式模板
        '整数': '^\d+$',
        '浮点数': '^\d+(\.\d+)?$',
        '电子邮箱': '^\w+([-+.]w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$',
      },
      search: '', // 查找内容
      replace: '', // 替换内容
      matches: [], // 匹配结果
      replacements: [], // 替换结果
    };
  },
  methods: {
    // 应用预定义的正则表达式模板
    applyPattern(pattern) {
      this.pattern = pattern;
    },

    // 匹配目标字符串
    doMatch() {
      const regex = new RegExp(this.pattern, this.options.ignoreCase ? 'gi' : 'g');
      this.matches = this.target.match(regex) || [];
    },

    // 替换目标字符串
    doReplace() {
      const regex = new RegExp(this.search, this.options.ignoreCase ? 'gi' : 'g');
      this.replacements = this.target.replace(regex, this.replace).split('
');
    },
  },
  watch: {
    pattern() {
      this.doMatch();
    },
  },
};
</script>

<style scoped>
.regex-toolbox {
  display: flex;
  flex-direction: column;
  align-items: center;
}

textarea {
  margin: 10px 0;
  width: 100%;
}

button {
  margin: 10px;
}

.result-list-component {
  margin-top: 20px;
}
</style>

Ringkasan

Artikel ini memperkenalkan cara menggunakan Vue untuk melaksanakan kotak alat ungkapan biasa yang ringkas Dengan merangkum komponen dan memanggil API ekspresi biasa, ia menyediakan pembangun bahagian hadapan dengan cara yang lebih mudah dan lebih pantas untuk memproses ungkapan biasa. Saya harap artikel ini dapat membantu pembaca lebih memahami pembangunan komponen Vue dan penggunaan ungkapan biasa, dan meningkatkan kecekapan kerja dalam pembangunan sebenar.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan kotak alat ungkapan biasa menggunakan Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!