我一直在一个小型文本编辑器中工作。我在id＝content上键入的每一个带有^的内容都应该被免费替换(^代表"(。假设我点击编辑器左上角的^按钮时输入了晚安，应该只返回晚安。我尽量把它整理好，把我的问题讲清楚。我刚开始编写代码，最近开始浏览和参与论坛。我添加了样式表和代码。感谢您提前提供的帮助。
<!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>
我的功能
<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;
}
这似乎只适用于"这意味着你可以使用
content.replaceAll('^', '');
除非我误解了这个问题。