js实现替换输入框中选中的文字

如果已知一个文本框内输入值,想点击替换掉里面选中的值,可以采用以下方法;
其实就是获取到选中的开始结束为止,然后使用subString方法进行切割字符串即可

javascript 复制代码
<template>
  <div>
    <el-input v-model="mobileText" ref="input"></el-input>
    <el-button @click="replaceSelection">替换选中文字</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      mobileText: '这是一段示例文本。',
      selectionStart: 0,
      selectionEnd: 0,
    };
  },
  methods: {
    // 获取选中的文字的起始和结束位置
    handleSelection() {
      this.selectionStart = this.$refs.input.selectionStart;
      this.selectionEnd = this.$refs.input.selectionEnd;
    },
    replaceSelection() {
      // 获取选中的文字
      const selectedText = this.mobileText.substring(this.selectionStart, this.selectionEnd);
      // 替换选中的文字,这里以"新内容"为例
      const newText = this.mobileText.substring(0, this.selectionStart) + "新内容" + this.mobileText.substring(this.selectionEnd);
      // 更新数据模型中的文本
      this.mobileText = newText;
    }
  }
}
</script>
相关推荐
yqcoder44 分钟前
JavaScript 柯里化:把“大餐”拆成“小炒”的艺术
开发语言·javascript·ecmascript
每天吃饭的羊1 小时前
JSZip的使用
开发语言·javascript
前端老石人1 小时前
前端开发中的 URL 完全指南
开发语言·前端·javascript·css·html
不可能的是2 小时前
从 /simplify 指令深挖 Claude Code 多 Agent 协同机制
javascript
Python私教2 小时前
Pure-Admin-Thin 深度解析:完整版和精简版到底怎么选?
vue.js·人工智能·开源
Rkgua3 小时前
事件流模型是什么和DOM事件模型等关系
javascript
W.A委员会3 小时前
多行溢出在末尾添加省略号
开发语言·javascript·css
拉里呱唧4 小时前
一个像在使用PPT的在线 HTML 编辑器:HeyHTML
javascript·交互·html5
ayqy贾杰5 小时前
Cursor SDK发布!开发者可直接搬走其内核
前端·vue.js·面试
changshuaihua0015 小时前
扣子开发指南
javascript·人工智能