Javascript 如何删除选定的文本区域

我正在制作一个简单的文本编辑器，为此我使用了一个函数来获取文本区域的选定文本

我的问题不是获取所选文本，而是在向所选文本添加一些标记（例如粗体或斜体）时，它会追加。因此，我想要的是在将其添加到文本区域之前先删除所选内容

这是我的密码：

<input type="button" id="bold" value="BOLD"/>
<input type="button" id="undo" value="UNDO"/>
<textarea id="message" cols="50" rows="20"></textarea>

var text = [];
var textarea = document.getElementById('message');
//simple texteditor
function edit(tag) {
    var startPos = textarea.selectionStart;
    var endPos = textarea.selectionEnd;
    var selection = textarea.value.substring(startPos, endPos);
    var surrounder = selection.replace(selection, "<" + tag + ">" + selection + "</" + tag + ">");
    textarea.value += surrounder;
    updatePreview();
    textarea.focus();
}
document.getElementById('bold').onclick = function () {
    edit('b');
};
document.getElementById('undo').onclick = function () {
    document.execCommand('undo',false,null);
};

var text=[]；
var textarea=document.getElementById（'message'）；
//简单文本编辑器
功能编辑（标签）{
var startPos=textarea.selectionStart；
var endPos=textarea.selectionEnd；
变量选择=textarea.value.substring（startPos、endPos）；
var surrounder=selection.replace（selection，“+selection+”）；
textarea.value+=环绕符；
updatePreview（）；
textarea.focus（）；
}
document.getElementById（'bold'）.onclick=function（）{
编辑（'b'）；
};
document.getElementById（'undo'）。onclick=function（）{
document.execCommand（'undo'，false，null）；
};

---

提前谢谢

我认为这对你很有用：

var text = [];
var textarea = document.getElementById('message');
//simple texteditor
function edit(tag) {
    var startPos = textarea.selectionStart;
    var endPos = textarea.selectionEnd;
    console.log(startPos);
    var selectionBefore = textarea.value.substring(0, startPos);
    var selection = textarea.value.substring(startPos, endPos);
    var selectionAfter = textarea.value.substring(endPos);
    var surrounder = selection.replace(selection, "<" + tag + ">" + selection + "</" + tag + ">");
    var newText = selectionBefore + surrounder + selectionAfter;
    textarea.value = newText;
    updatePreview();
    textarea.focus();
}
document.getElementById('bold').onclick = function () {
    edit('b');
};
document.getElementById('undo').onclick = function () {
    document.execCommand('undo',false,null);
};

var text=[]；
var textarea=document.getElementById（'message'）；
//简单文本编辑器
功能编辑（标签）{
var startPos=textarea.selectionStart；
var endPos=textarea.selectionEnd；
console.log（startPos）；
var selectionBefore=textarea.value.substring（0，startPos）；
变量选择=textarea.value.substring（startPos、endPos）；
var selectionAfter=textarea.value.substring（endPos）；
var surrounder=selection.replace（selection，“+selection+”）；
var newText=selectionBefore+surrounder+selectionAfter；
textarea.value=newText；
updatePreview（）；
textarea.focus（）；
}
document.getElementById（'bold'）.onclick=function（）{
编辑（'b'）；
};
document.getElementById（'undo'）。onclick=function（）{
document.execCommand（'undo'，false，null）；
};

---

所以你想用你的标签替换选择，对吗？那么，为什么要使用

+=

运算符将文本附加到textarea.value的末尾？这意味着所选内容应始终位于文本区域中消息的末尾。当然@Eddi，但当我使用=运算符并选择文本的一部分时，它将替换整个文本谢谢，这正是我所寻找的。你能简单解释一下你和我做的比较吗？你选择了你的全部旧文本并添加了你的新文本（带标签的选择）。他在您选择之前和之后保存文本（

selectionBefore

和

selectionAfter

）。然后他在选择的开始和结束处添加标记，就像在变量

surrounder

中一样。最后，文本区域的新值是

selectionBefore

，然后是

surrounder

，最后是

selectionAfter

，因此旧文本被“删除”。基本上，您将文本区域内容分为3部分：一部分是所选文本，其他部分在该选择之前和之后。我添加了两个变量：

selectionBefore

和

selectionAfter

selectionBefore

接收文本区域中第一个字符到第一个选定字符的文本

selectionAfter

接收完整的文本区域内容，但删除所有字符，直到最后一个选定字符。

newText

变量组合了这三个部分。