实现特殊字符^替换功能的简易文本编辑器求助

我正在开发一款小型文本编辑器，需求为：点击编辑器左上角的^{按钮时，将id为content的contenteditable区域内所有}字符替换为空（即删除所有^）。例如输入“good ^night”，点击按钮后应显示“good night”。

我刚接触编程，首次参与论坛交流，已附上相关代码，希望得到技术帮助解决功能实现问题。

用户提供的HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>AT - Text Editor</title>
</head>
<body>

    <div class="container">

        <div class="toolbar">
        
            <div class="btn-toolbar">
             <button onclick = "escapeRegExp()">^</button>
            </div>
        </div>
        
        <div id="content" contenteditable="true" spellcheck="false">
        </div>
    </div>
         
</body>
</html>

用户提供的JavaScript代码 #

<script>
function escapeRegExp() {
    return content.replace(^, '');
}
</script>

用户提供的CSS代码 #

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

body {
    background: #ddd;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

li {
    margin-left: 16px;
}

a {
    cursor: pointer;
}

.container {
    max-width: 991px;
    width: 100%;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
}
.toolbar {
    padding: 16px;
    background: #eee;
}
.toolbar .head {
    display: flex;
    grid-gap: 10px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.toolbar .head > input {
    max-width: 100px;
    padding: 6px 10px;
    border-radius: 6px;
    border: 2px solid #ddd;
    outline: none;
}
.toolbar .head select {
    background: #fff;
    border: 2px solid #ddd;
    border-radius: 6px;
    outline: none;
    cursor: pointer;
}
.toolbar .head .color {
    background: #fff;
    border: 2px solid #ddd;
    border-radius: 6px;
    outline: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    grid-gap: 6px;
    padding: 0 10px;
}
.toolbar .head .color span {
    font-size: 14px;
}
.toolbar .head .color input {
    border: none;
    padding: 0;
    width: 26px;
    height: 26px;
    background: #fff;
    cursor: pointer;
}
.toolbar .head .color input::-moz-color-swatch {
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 50%;
}
.toolbar .btn-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    grid-gap: 10px;
}
.toolbar .btn-toolbar button {
    background: #fff;
    border: 2px solid #ddd;
    border-radius: 6px;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}
.toolbar .btn-toolbar button:hover {
    background: #f3f3f3;
}
#content {
    padding: 16px;
    outline: none;
    max-height: 50vh;
    overflow: auto;
}
#show-code[data-active="true"] {
    background: #eee;
}

你的代码存在3个关键问题，修正后即可实现需求：

• 按钮点击事件格式错误：HTML中onclick="escapeRegExp"缺少括号，无法触发函数，需改为onclick="escapeRegExp()"
• 未获取目标DOM元素：JavaScript中直接使用content变量，但未先通过document.getElementById('content')获取编辑区域元素
• 字符串替换语法错误：^是正则特殊字符，直接写replace(^, '')会报错，且要替换所有匹配项需使用全局正则表达式/\^/g

以下是修正后的完整可运行代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>AT - Text Editor</title>
</head>
<body>
    <div class="container">
        <div class="toolbar">
            <div class="btn-toolbar">
                <button onclick="removeCaretSymbols()">^</button>
            </div>
        </div>
        <div id="content" contenteditable="true" spellcheck="false"></div>
    </div>

    <script>
        function removeCaretSymbols() {
            // 获取编辑区域元素
            const contentEl = document.getElementById('content');
            // 全局替换所有^字符为空
            contentEl.textContent = contentEl.textContent.replace(/\^/g, '');
        }
    </script>
</body>
</html>

关键修正说明 #

1. 函数名改为removeCaretSymbols，更直观反映功能
2. 使用textContent操作文本，避免编辑区域内的HTML结构干扰替换逻辑
3. 正则表达式/\^/g：\^转义特殊字符，g标志确保替换所有匹配的^，而非仅第一个

内容的提问来源于stack exchange，提问作者Diego Otávio de Sousa Santiago