Javascript 选择段落标记内的文本

是否可以选择文本或获取段落中突出显示文本的位置

我使用vuejs中的段落循环逐句显示文本

<p
 class="mreadonly text-left mark-context"
 v-for="line in jsonData.first.segments"
 v-bind:key="line.idx"
 @mouseup="mouseupSel($event)"
 >{{line.text}}</p>

{{line.text}

mouseup是我认为唯一可能使用的事件，因为onselect（@select on vue）不适用于段落

考虑到所选文本主要用于将原始完整字符串拆分为两部分，我可以如何获得onselect类事件

---

我应该把我的段落转换成输入标签吗？有可能让它们看起来像段落吗？

多亏了Leeish，以下是我所做的。这显然是一个略微重复的问题，但这里的答案可能会有所帮助

HTML保持不变，使用@mouseup。 关于我编写的方法（作为快速而肮脏的示例）：

---

@Leeish我将对其进行测试，但我认为这会产生另一个恼人的问题，因为没有事件来启用/禁用选择。选项卡没有onview/onhide事件。尤其是制表符中的制表符。您将要在mouseup事件中使用。@Leeish是的，它有效。答案与那个稍有不同，因为我们可以使用\@mouseup。忽略我对onview/onhide的评论。我想在全球范围内创建侦听器，但我不再需要它了。（仍然存在与此职位无关的问题；-））

mouseup(ev){
      console.log('onselect',ev);
      var gs = window.getSelection();
      var data = gs.baseNode.data;
      var data2 = data.substr(gs.anchorOffset+gs.toString().length,data.length);
      var data1 = data.substr(0,gs.anchorOffset) + gs.toString();     
      console.log(data1);
      console.log(data2);
    },