Выделите текст в тегах в текстовом JavaScript и VUE

Question

Я работал над проблемой, которую еще не решил. У меня есть текст в текстовой области, и слова, которые имеют [ в начале и ] в конце, будут выделены, а затем перейдут к следующему слову и выделят его.

Поэтому мне удалось получить его, чтобы получить текст в скобках, но как мне переместить и выделить этот текст и перейти к следующему слову. У меня есть идея использовать 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',
})

Вы можете проверить это здесь: https://jsfiddle.net/amrw0rer/

Answer 1

Я не думаю, что это можно сделать простым способом, как вы можете себе представить (просто установив указатели и т. Д.). Без серьезных изменений в вашем примере вы не сможете добиться того, чего хотите. Я подготовил действительно очень маленький пример того, как ты мог это сделать. Там нет никаких проверок, и это никогда не должно использоваться, как я сделал это любым продуктивным способом - это просто как образец, чтобы прояснить идею.

https://jsfiddle.net/amrw0rer/1/

То, что вы могли бы и, вероятно, должны сделать, это поместить поля ввода между нередактируемыми текстовыми частями. Пример показывает это для одного ввода - он не будет работать с двумя из-за части разделения строки.

Улучшение будет заключаться в том, чтобы поле ввода всегда находилось в позиции, которую вы в настоящее время можете изменить.

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

Возможно, вы захотите обернуть входные данные в форму и прослушать событие submit, чтобы перейти к следующему указателю. Единственное, что вам нужно сделать, это обновить значения textBefore и textAfterInput и сохранить новый текст в любое удобное для вас место.