在textarea javascript和vue中选择标记内的文本

我一直在研究一个我还没有解决的问题。 我拥有的是文本区域中的文本，在开始处有[且在结束处有]的单词将被选中，然后跳转到下一个单词并选择它

因此，我必须设法让它得到括号内的文本，但我如何移动和选择该文本，并跳转到下一个单词。我有一个使用setSelectionRange（）的想法；有些是怎么做的

以下是我目前的代码：

var driftError = ['Move over and select [this] then write something and select [this here]'];

Vue.component('template-maker',{
    template: '\
    <div>\
    <b>Select template</b><br>\
    <select id="templates" v-on:change="appendData">\
<option selected disabled></option>\
<option>Error template</option>\
    </select>\<br>\
    <b>Text</b><br>\
    <textarea id="templateText" v-on:click="test"/>\
    </div>\
    ',
    methods:{
        appendData: function(){
            var templateText = document.getElementById('templateText');
            templateText.innerHTML = driftError[0];
        },
        test: function(){
    if(templateText.value.length != 0){
      var markupExtract = driftError[0].split('[');
      var inputLen = templateText.value.length;
      for (var i = 1; i < markupExtract.length; i++) {
          alert(markupExtract[i].split(']')[0]);
                        //templateText.setSelectionRange(0,markupExtract[i].split(']')[0].length));
      }
    }
        }
    }
})

new Vue({
    el: '#template',
})

var driftError=[“移动并选择[this]，然后写一些东西并选择[this here]”；
Vue.component（'template-maker'{
模板：'\
\
选择模板
\
\
\
错误模板\
\
\
文本
\
\
\
',
方法：{
appendData:函数（）{
var templateText=document.getElementById（'templateText'）；
templateText.innerHTML=漂移错误[0]；
},
测试：函数（）{
if（templateText.value.length！=0）{
var markupExtract=flofterror[0]。拆分（'['）；
var inputLen=templateText.value.length；
对于（var i=1；i

您可以在此处进行测试：

---

我不认为这可以像你想象的那样用一种简单的方法来实现（只是设置指针等）。如果你的榜样没有重大改变，你将无法实现你想要的。我准备了一个很小的例子来说明你是如何做到的。没有检查，这永远不应该被使用，因为我做了任何有成效的方式-它只是一个样本，以澄清的想法

您可以而且可能实际上应该做的是将输入字段放在不可编辑文本部分之间。该示例显示了一个输入-由于字符串拆分部分，两个输入无法使用

增强功能是将输入字段始终放在当前允许更改的位置

 <span>{{ textBeforeInput }}</span><input v-model="newText" /><span>{{ textAfterInput}}</span>

{{textBeforeInput}}{{textAfterInput}}

---

您可能希望将输入包装到表单中，并侦听submit事件以更改到下一个指针。然后，您只需更新textBefore和TextAfter输入值，并将新文本保存到您需要的位置。

是否只希望文本指针跳到该位置？第二个“跳跃”应该在什么时候出现？按空格键后？@FrankProvost可能tab键更好，或者向上箭头，因为如果你写两个单词，空格将是一个问题，我想你真的希望文本的其余部分不可编辑吗？是的。当textarea获得焦点时，第一个带括号的单词被选中，当你写一些文本时，按下一些键，它会移动到下一个带括号的单词。Ok。如果所有的文本都可以编辑，会有什么不同吗。现在，如果你在模板中放更多的括号，它只会得到第一个括号，并将其设置为一个输入字段，如前所述，这是一个如何给它加点的粗略示例。您需要改进字符串拆分。我不知道有什么跨浏览器的方法可以在文本区域内设置指针。