jQuery Получить значение предыдущих символов до определенного символа в пределах текстовой области - PullRequest
Новая
       14

jQuery Получить значение предыдущих символов до определенного символа в пределах текстовой области

0 голосов
/ 03 марта 2020

Я делаю текстовый редактор, используя jquery и электрон. Я хотел бы иметь возможность сделать автозаполнение тегов текстового редактора HTML.

Мне бы хотелось, чтобы пользователь вводил тег, например, <tag>, а закрывающий </tag> вставлялся. Я планирую сделать это, определяя, когда набирается >, и сохраняя символы до < в качестве переменной. Затем я вставил бы эти символы между </ и >. Однако я не уверен, как это сделать.

У меня есть следующий код: 

function setCaretPosition(elemId, caretPos) {
    var el = document.getElementById(elemId);
    el.value = el.value;
    if (el !== null) {
        if (el.createTextRange) {
            var range = el.createTextRange();
            range.move('character', caretPos);
            range.select();
            return true;
        } else {
            if (el.selectionStart || el.selectionStart === 0) {
                el.focus();
                el.setSelectionRange(caretPos, caretPos);
                return true;
            } else {
                el.focus();
                return false;
            }
        }
    }
}

$("#input").on("keydown", function(e) {
    if (e.key === ">") {
        $("#input").focus();
        document.execCommand('insertHTML', true, '></>');
        var cursorPosition = $('#input').prop("selectionStart");
        setCaretPosition('input', cursorPosition - 3);

    }
});

и 

<textarea class="form-control" id="input" spellcheck="false" wrap="off" placeholder="Get Creative!"></textarea>

Есть ли способ сделать это?

1 Ответ

1 голос
/ 06 марта 2020

Да, есть.

Вы можете заменить значение текстовой области следующим образом: подстрока из первой позиции значения textarea в позицию закрывающей > для открывающей метки добавлено с закрывающей строкой тега и оставшейся строкой, как показано ниже. Затем установите позицию курсора с помощью setSelectionRange (подробнее здесь ). Кроме того, вы можете получить позицию каретки textarea, используя textarea.selectionStart. Он поддерживается в большинстве браузеров (посмотрите здесь , чтобы узнать, какой браузер поддерживает это свойство).

Вот очень базовый c automati c закрывающий тег вставки (попробуйте вставить "Test" Текст ", go в начале текстовой области, затем добавьте тег): 

const textarea = document.querySelector('#textarea')
let tag = {
  opened: false,
  textStart: null,
  textEnd: null
}

textarea.addEventListener('keydown', e => {
  if (e.key === '<') {
    tag.opened = true
    tag.textStart = textarea.selectionStart + 1
  } else if (e.key === '>') {
    e.preventDefault()
    tag.textEnd = textarea.selectionStart
    const tagText = textarea.value.substring(tag.textStart, tag.textEnd)
    const closingTag = `</${tagText}>`
    const value = textarea.value
    const beforeClosingTagText = value.substring(0, textarea.selectionStart)
    const afterClosingTagText = value.substring(textarea.selectionStart)
    const endCaretPosition = beforeClosingTagText.length + 1

    textarea.value = `${beforeClosingTagText}>${closingTag}${afterClosingTagText}`
    textarea.setSelectionRange(endCaretPosition, endCaretPosition)
    tag = {
      opened: false,
      textStart: null,
      textEnd: null
    }
  }
})
* {
  box-sizing: border-box;
}

textarea {
  width: 100%;
  height: 200px;
  overflow: auto;
  border-radius: 5px;
  border: 1px solid #12121244;
  padding: 10px;
}

textarea:focus {
  border: 1px solid #8fdef7;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea class="form-control" id="textarea" spellcheck="false" wrap="off" placeholder="Get Creative!"></textarea>

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

  • Что, если человек хочет вставить знак «меньше», а не тег (например, 3 < 4)?
  • Что, если человек решит удалить открытие открывающего тега?
  • Что если человек переместит позицию каретки после открытия тега и использует знак «больше» > в другом месте перед закрытием, сказал tag?

Кроме того, execCommand устарел, а его использование не рекомендуется .

...