jQuery获取先前字符的值直到textarea中的某个字符

Question

我使用 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>

有没有办法做到这一点？

Answer 1

是的，有。

您可以将 textarea 的值替换为：从textarea 值的第一个位置到结束> 的开始标记位置的子字符串添加结束标记字符串 和 剩余的字符串，如下所示。然后，使用setSelectionRange 设置光标位置（进一步阅读here）。此外，您可以使用textarea.selectionStart 获取textarea 的插入符号位置。大多数浏览器都支持它（查看here 找出支持此属性的浏览器）。

这是一个非常基本的自动结束标签插入（尝试插入“测试文本”，转到文本区域的开头，然后添加一个标签）：

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>

请注意，上面的代码只回答了您的从文本区域中的某个位置获取值到另一个特定位置并将所述值作为结束标记插入的问题；它不处理在文本编辑器中至关重要的其他场景。您仍然需要自己处理的一些场景包括：

• 如果有人想插入小于号而不是标签（例如3 < 4）怎么办？
• 如果有人决定删除开始标签的开头怎么办？
• 如果一个人在打开标签后移动插入符号的位置，并在关闭该标签之前在其他地方使用大于号 > 怎么办？

此外，execCommand 已过时，its use is discouraged。