jQuery获取文本区域中直到某个字符之前的前一个字符的值

Question

我使用jquery和electronic制作了一个文本编辑器。我希望能够使文本编辑器自动完成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值的第一个位置到开始标记的结束>位置的子字符串，添加结束标记字符串和剩余字符串，如下所示。然后，使用setSelectionRange设置光标位置(此处进一步阅读(。此外，您还可以使用textarea.selectionStart获取textarea的插入符号位置。它在大多数浏览器中都受支持(请查看此处了解哪个浏览器支持此属性(。

这里有一个非常基本的自动关闭标签插入(尝试插入"测试文本"，转到文本区域的开头，然后添加一个标签(：

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已经过时，不鼓励使用。