vue实现查询替换

Vue实现查询替换功能

在Vue中实现查询替换功能通常涉及以下几个核心步骤：

数据绑定与输入处理

使用v-model双向绑定输入框的值到Vue实例的数据属性。创建两个输入框分别用于查询和替换内容，以及一个文本区域显示待处理的内容。

<template>
  <div>
    <input v-model="searchText" placeholder="输入查询内容">
    <input v-model="replaceText" placeholder="输入替换内容">
    <textarea v-model="content" placeholder="输入待处理文本"></textarea>
    <button @click="replaceAll">全部替换</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchText: '',
      replaceText: '',
      content: ''
    }
  }
}
</script>

实现替换逻辑

在methods中定义替换函数，使用JavaScript字符串方法或正则表达式进行替换操作。对于简单替换，可以使用字符串的replace方法；对于复杂模式，建议使用正则表达式。

methods: {
  replaceAll() {
    if (!this.searchText) return
    const regex = new RegExp(this.searchText, 'g')
    this.content = this.content.replace(regex, this.replaceText)
  }
}

处理大小写敏感选项

添加复选框控制是否区分大小写，动态调整正则表达式标志。

<input type="checkbox" v-model="caseSensitive">区分大小写

methods: {
  replaceAll() {
    if (!this.searchText) return
    const flags = this.caseSensitive ? 'g' : 'gi'
    const regex = new RegExp(this.searchText, flags)
    this.content = this.content.replace(regex, this.replaceText)
  }
}

添加替换统计功能

扩展替换方法，返回并显示替换发生的次数。

methods: {
  replaceAll() {
    if (!this.searchText) return
    let count = 0
    const flags = this.caseSensitive ? 'g' : 'gi'
    const regex = new RegExp(this.searchText, flags)
    this.content = this.content.replace(regex, () => {
      count++
      return this.replaceText
    })
    alert(`共替换了${count}处`)
  }
}

优化性能与用户体验

对于大文本处理，可以考虑添加防抖或节流，避免界面卡顿。使用计算属性显示替换预览效果。

computed: {
  preview() {
    if (!this.searchText) return this.content
    const flags = this.caseSensitive ? 'g' : 'gi'
    const regex = new RegExp(this.searchText, flags)
    return this.content.replace(regex, `<mark>${this.replaceText}</mark>`)
  }
}

<div v-html="preview" class="preview-area"></div>

样式优化

添加CSS样式提高界面可用性，为匹配内容添加高亮效果。

.preview-area {
  border: 1px solid #ddd;
  padding: 10px;
  margin-top: 10px;
  white-space: pre-wrap;
}
mark {
  background-color: yellow;
}

完整组件示例

<template>
  <div class="replace-container">
    <div class="input-group">
      <input v-model="searchText" placeholder="查询内容">
      <input v-model="replaceText" placeholder="替换为">
      <label>
        <input type="checkbox" v-model="caseSensitive">区分大小写
      </label>
      <button @click="replaceAll">全部替换</button>
    </div>

    <textarea v-model="content" placeholder="输入待处理文本"></textarea>

    <div class="preview" v-if="searchText">
      <h4>预览效果:</h4>
      <div v-html="preview" class="preview-area"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchText: '',
      replaceText: '',
      content: '',
      caseSensitive: false
    }
  },
  computed: {
    preview() {
      const flags = this.caseSensitive ? 'g' : 'gi'
      const regex = new RegExp(this.escapeRegExp(this.searchText), flags)
      return this.content.replace(regex, `<mark>${this.replaceText}</mark>`)
    }
  },
  methods: {
    escapeRegExp(string) {
      return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
    },
    replaceAll() {
      if (!this.searchText) return

      let count = 0
      const flags = this.caseSensitive ? 'g' : 'gi'
      const regex = new RegExp(this.escapeRegExp(this.searchText), flags)

      this.content = this.content.replace(regex, () => {
        count++
        return this.replaceText
      })

      this.$notify({
        title: '替换完成',
        message: `共替换了${count}处内容`,
        type: 'success'
      })
    }
  }
}
</script>

<style>
.replace-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}
.input-group {
  margin-bottom: 15px;
}
input[type="text"] {
  padding: 8px;
  margin-right: 10px;
}
textarea {
  width: 100%;
  min-height: 200px;
  padding: 10px;
}
button {
  padding: 8px 15px;
  background: #42b983;
  color: white;
  border: none;
  cursor: pointer;
}
.preview-area {
  border: 1px solid #eee;
  padding: 10px;
  margin-top: 5px;
}
mark {
  background-color: #ffeb3b;
}
</style>

这个实现提供了基本的查询替换功能，包括实时预览、大小写敏感选项和替换统计。可以根据实际需求进一步扩展，比如添加正则表达式支持、局部替换功能或保存处理历史等。