在内容可编辑的 div 中编辑 v 模型/在 div 中突出显示文本

Question

我正在处理的组件完成后，应是一个文本区域或内容可编辑的div，其中文本后跟一个主题标签被突出显示/或类似芯片的东西。

目前，我正在使用一个内容可编辑的div，周围是另一个建议关键字的组件。在该组件中是一个 v 模型

我的目标是将文本放在 # 之后，在一个跨度中。

<template>
    <at :ats=['#'] v-model="vmodel">
        <div contenteditable @keypress.enter="highlight"></div>
    </at>
<template>

这不是我想要的，因为它在div 的开头添加了文本。例如，当我写："你好 #Something">我得到：《#Something 你好》

<script>
import At from 'vue-at'
export default {
components: { At },
   data() {
     return { vmodel: '', };
   },
methods: {
   highlight(){
      this.vmodel = this.vmodel.replace(/B#([^ ]+)/g,"<span class='highlight-Text'>$&</span>")
   }
}
</script>

如何操作 vmodel，例如在键入时向文本添加跨度，使其不会输出乱码？

Answer 1

我认为你的问题是正则表达式。你把整个比赛($&(放在跨度内。这包括哈希。我不确定您希望如何完成它，但这会将哈希放回原来的位置，并将哈希之后的部分放在跨度内。

new Vue({
  el: '#app',
  components: {
    at: {
      props: ['value'],
      template: '<div>{{value}}<slot></slot></div>'
    }
  },
  data() {
    return {
      vmodel: 'Something#-else',
    };
  },
  methods: {
    highlight() {
      this.vmodel = this.vmodel.replace(/(#B)([^ ]+)/g, "$1<span class='highlight-Text'>$2</span>");
      console.log("New vmodel", this.vmodel);
    }
  }
});

.highlight-Text {
  border-radius: 5px;
  color: black;
  background-color: #5297f1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <at v-model="vmodel">
    <div contenteditable @keypress.enter="highlight">editable stuff</div>
  </at>
</div>