vue实现查询替换

Vue 实现查询替换功能

在 Vue 中实现查询替换功能，可以通过数据绑定和字符串操作方法结合实现。以下是具体实现方式：

基础实现

<template>
  <div>
    <textarea v-model="text" placeholder="输入文本内容"></textarea>
    <input v-model="searchText" placeholder="输入要查找的内容">
    <input v-model="replaceText" placeholder="输入替换内容">
    <button @click="replaceAll">全部替换</button>
    <div>{{ resultText }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: '',
      searchText: '',
      replaceText: '',
      resultText: ''
    }
  },
  methods: {
    replaceAll() {
      if (!this.searchText) return
      this.resultText = this.text.replace(new RegExp(this.searchText, 'g'), this.replaceText)
    }
  }
}
</script>

高级实现（支持区分大小写）

<template>
  <div>
    <textarea v-model="text"></textarea>
    <input v-model="searchText">
    <input v-model="replaceText">
    <label>
      <input type="checkbox" v-model="caseSensitive"> 区分大小写
    </label>
    <button @click="replaceAll">替换</button>
    <div>{{ resultText }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: '',
      searchText: '',
      replaceText: '',
      resultText: '',
      caseSensitive: false
    }
  },
  methods: {
    replaceAll() {
      if (!this.searchText) return
      const flags = this.caseSensitive ? 'g' : 'gi'
      this.resultText = this.text.replace(new RegExp(this.searchText, flags), this.replaceText)
    }
  }
}
</script>

优化版本（实时高亮显示匹配项）

<template>
  <div>
    <textarea v-model="text"></textarea>
    <input v-model="searchText" @input="highlightMatches">
    <input v-model="replaceText">
    <button @click="replaceAll">替换</button>
    <div v-html="highlightedText"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: '',
      searchText: '',
      replaceText: '',
      highlightedText: ''
    }
  },
  methods: {
    highlightMatches() {
      if (!this.searchText) {
        this.highlightedText = this.text
        return
      }
      const regex = new RegExp(this.searchText, 'gi')
      this.highlightedText = this.text.replace(regex, match => 
        `<span style="background-color: yellow">${match}</span>`
      )
    },
    replaceAll() {
      if (!this.searchText) return
      const regex = new RegExp(this.searchText, 'gi')
      this.text = this.text.replace(regex, this.replaceText)
      this.highlightMatches()
    }
  },
  watch: {
    text() {
      this.highlightMatches()
    }
  }
}
</script>

组件化实现

可以将查询替换功能封装为可复用组件：

<template>
  <div class="search-replace">
    <slot name="content" :text="processedText">
      <textarea v-model="internalText"></textarea>
    </slot>
    <div class="controls">
      <input v-model="searchQuery" placeholder="查找">
      <input v-model="replaceQuery" placeholder="替换为">
      <button @click="replace">替换</button>
      <button @click="replaceAll">全部替换</button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    value: String,
    caseSensitive: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      searchQuery: '',
      replaceQuery: '',
      internalText: this.value
    }
  },
  computed: {
    processedText() {
      if (!this.searchQuery) return this.internalText
      const flags = this.caseSensitive ? 'g' : 'gi'
      return this.internalText.replace(
        new RegExp(this.searchQuery, flags),
        `<mark>${this.searchQuery}</mark>`
      )
    }
  },
  methods: {
    replace() {
      // 实现单个替换逻辑
    },
    replaceAll() {
      if (!this.searchQuery) return
      const flags = this.caseSensitive ? 'g' : 'gi'
      this.internalText = this.internalText.replace(
        new RegExp(this.searchQuery, flags),
        this.replaceQuery
      )
      this.$emit('input', this.internalText)
    }
  },
  watch: {
    value(newVal) {
      this.internalText = newVal
    }
  }
}
</script>

使用组件方式：

<template>
  <search-replace v-model="documentContent" />
</template>

<script>
import SearchReplace from './components/SearchReplace.vue'

export default {
  components: {
    SearchReplace
  },
  data() {
    return {
      documentContent: '初始文本内容...'
    }
  }
}
</script>

这些实现方式覆盖了从基础到高级的查询替换功能，可以根据实际需求选择合适的方案。