插入两个字符串，光标在两个带JavaScript的字符串中间
Inserting two strings with the cursor in the middle of the two strings with JavaScript
我正在尝试创建一个文本编辑器。用户可以在此处插入 html 代码。有一个工具栏。当用户单击 'Add Code' 按钮时，我希望插入一个 </code></strong> 文本，光标位于开始和结束标记的中间。</p>
<p>我有以下代码可以在光标位置插入任何文本：</p>
<pre><code>function insertAtCaret(areaId,text) {
var txtarea = document.getElementById(areaId);
var scrollPos = txtarea.scrollTop;
var strPos = 0;
var br = ((txtarea.selectionStart || txtarea.selectionStart == '0') ?
"ff" : (document.selection ? "ie" : false ) );
if (br == "ie") {
txtarea.focus();
var range = document.selection.createRange();
range.moveStart ('character', -txtarea.value.length);
strPos = range.text.length;
}
else if (br == "ff") strPos = txtarea.selectionStart;
var front = (txtarea.value).substring(0,strPos);
var back = (txtarea.value).substring(strPos,txtarea.value.length);
txtarea.value=front+text+back;
strPos = strPos + text.length;
if (br == "ie") {
txtarea.focus();
var range = document.selection.createRange();
range.moveStart ('character', -txtarea.value.length);
range.moveStart ('character', strPos);
range.moveEnd ('character', 0);
range.select();
}
else if (br == "ff") {
txtarea.selectionStart = strPos;
txtarea.selectionEnd = strPos;
txtarea.focus();
}
txtarea.scrollTop = scrollPos;
}
有了这段代码，我想要的 </code></strong> 被插入到光标之前。有没有什么办法可以用代码实现如下：</p>
<p><em><code></em> + 光标 + <em>
是的，有可能。
由于您的函数已经将插入符号移动到插入字符串的末尾，您只需将其向后移动几个字符（在本例中为 7 个字符）。我会修改该函数以在其中包含一个参数，以指定我要将插入符号移回的字符数。
function insertAtCaret(areaId, text, caretOffset) {
然后将计算插入符位置的部分更改为
strPos = strPos + text.length + caretOffset;
当你调用你的函数时，这样做：
insertAtCaret('my-textarea', '<code></code>', -7);
应该可以。这里有一个codepen来演示。
当然，您可能希望也可能不希望通过更强大的检查来增强它，例如确保 caretOffset 始终为负数，或者它向后移动插入符号的最大字符数是数字添加文本中的字符数。
我正在尝试创建一个文本编辑器。用户可以在此处插入 html 代码。有一个工具栏。当用户单击 'Add Code' 按钮时，我希望插入一个 有了这段代码，我想要的 </code></strong> 文本，光标位于开始和结束标记的中间。</p>
<p>我有以下代码可以在光标位置插入任何文本：</p>
<pre><code>function insertAtCaret(areaId,text) {
var txtarea = document.getElementById(areaId);
var scrollPos = txtarea.scrollTop;
var strPos = 0;
var br = ((txtarea.selectionStart || txtarea.selectionStart == '0') ?
"ff" : (document.selection ? "ie" : false ) );
if (br == "ie") {
txtarea.focus();
var range = document.selection.createRange();
range.moveStart ('character', -txtarea.value.length);
strPos = range.text.length;
}
else if (br == "ff") strPos = txtarea.selectionStart;
var front = (txtarea.value).substring(0,strPos);
var back = (txtarea.value).substring(strPos,txtarea.value.length);
txtarea.value=front+text+back;
strPos = strPos + text.length;
if (br == "ie") {
txtarea.focus();
var range = document.selection.createRange();
range.moveStart ('character', -txtarea.value.length);
range.moveStart ('character', strPos);
range.moveEnd ('character', 0);
range.select();
}
else if (br == "ff") {
txtarea.selectionStart = strPos;
txtarea.selectionEnd = strPos;
txtarea.focus();
}
txtarea.scrollTop = scrollPos;
}
</code></strong> 被插入到光标之前。有没有什么办法可以用代码实现如下：</p>
<p><em><code></em> + 光标 + <em>
是的，有可能。
由于您的函数已经将插入符号移动到插入字符串的末尾，您只需将其向后移动几个字符（在本例中为 7 个字符）。我会修改该函数以在其中包含一个参数，以指定我要将插入符号移回的字符数。
function insertAtCaret(areaId, text, caretOffset) {
然后将计算插入符位置的部分更改为
strPos = strPos + text.length + caretOffset;
当你调用你的函数时，这样做：
insertAtCaret('my-textarea', '<code></code>', -7);
应该可以。这里有一个codepen来演示。
当然，您可能希望也可能不希望通过更强大的检查来增强它，例如确保 caretOffset 始终为负数，或者它向后移动插入符号的最大字符数是数字添加文本中的字符数。