在这个基础上优化代码在页面再加一个快速复制的按钮优化页面色彩为可选择项!DOCTYPE html html head meta charset=UTF-8 title字符串替换工具title meta name=viewport content=width=device-width initial-scale=1 link rel=stylesheet href=h
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>字符串替换工具</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<style>
body {
padding: 20px;
background: linear-gradient(to right, #ff6666, #ff8c66, #ffb366, #ffd966, #ffff66, #d9ff66, #b3ff66, #8cff66, #66ff66, #66ff8c, #66ffb3, #66ffd9, #66ffff, #66d9ff, #66b3ff, #668cff, #6666ff, #8c66ff, #b366ff, #d966ff, #ff66ff, #ff66d9, #ff66b3, #ff668c, #ff6666);
}
<pre><code> label {
font-size: 18px;
font-weight: bold;
}
textarea {
font-size: 16px;
line-height: 1.5;
background-color: rgba(255, 255, 255, 0.8);
}
button {
margin-bottom: 10px;
font-size: 16px;
}
/* 新增样式 */
.color-option {
display: flex;
justify-content: center;
}
.color-option label {
margin-right: 10px;
}
</style>
</code></pre>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 mb-4 mb-md-0">
<div class="mb-3">
<label for="input-text">请输入要替换的字符串：</label>
</div>
<div class="form-group">
<textarea id="input-text" class="form-control" rows="10"></textarea>
</div>
</div>
<div class="col-md-3 d-flex flex-column justify-content-between">
<div class="text-center">
<button class="btn btn-primary btn-block" onclick="replaceStrings();"><i class="fas fa-exchange-alt mr-2"></i>替换</button>
<button class="btn btn-secondary btn-block" onclick="copyOutput();"><i class="far fa-copy mr-2"></i>复制输出</button>
<button class="btn btn-secondary btn-block" onclick="clearInput();"><i class="far fa-trash-alt mr-2"></i>清空输入</button>
<button class="btn btn-secondary btn-block" onclick="clearOutput();"><i class="far fa-trash-alt mr-2"></i>清空输出</button>
</div>
<!-- 新增快速复制按钮 -->
<div class="text-center">
<button class="btn btn-secondary" onclick="copyOutput();"><i class="far fa-copy mr-2"></i>快速复制</button>
</div>
<!-- 新增色彩可选项 -->
<div class="color-option">
<label for="color-1"><input type="radio" name="color" value="#ff6666" id="color-1" checked>红色</label>
<label for="color-2"><input type="radio" name="color" value="#66ff66" id="color-2">绿色</label>
<label for="color-3"><input type="radio" name="color" value="#66b3ff" id="color-3">蓝色</label>
</div>
</div>
<div class="col-md-3 mb-4 mb-md-0">
<div class="mb-3">
<label for="output-text">替换后的字符串为：</label>
</div>
<div class="form-group">
<textarea id="output-text" class="form-control" rows="10"></textarea>
</div>
</div>
</div>
</div>
<script>
function replaceStrings() {
var inputText = document.getElementById("input-text").value;
var strList = inputText.split("\n");
var newStr = "";
for (var i = 0; i < strList.length; i++) {
var str = strList[i];
var multilinePattern = /\$\$[\s\S]*?\$\$/g;
str = str.replace(multilinePattern, function(match) {
return match.replace(/\n/g, "");
});
var centerPattern = /\$\$(.*?)\$\$/g;
str = str.replace(centerPattern, function(match, p1) {
return "\\[" + p1 + "\\]";
});
var count = 0;
for (var j = 0; j < str.length; j++) {
if (str[j] == "$") {
count += 1;
if (count % 2 == 1) {
newStr += "\\(";
} else {
newStr += "\\)";
}
} else {
newStr += str[j];
}
}
newStr += "\n";
}
document.getElementById("output-text").value = newStr;
}
<pre><code> function clearInput() {
document.getElementById("input-text").value = "";
}
function clearOutput() {
document.getElementById("output-text").value = "";
}
function copyOutput() {
var outputText = document.getElementById("output-text");
outputText.select();
document.execCommand("copy");
alert("复制成功！");
}
// 新增更换背景色函数
function changeBgColor(color) {
document.body.style.background = color;
}
// 监听色彩可选项的变化
var colorOptions = document.getElementsByName("color");
for (var i = 0; i < colorOptions.length; i++) {
colorOptions[i].addEventListener("change", function() {
changeBgColor(this.value);
});
}
// 初始化背景色
changeBgColor(colorOptions[0].value);
</script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.3/js/all.min.js"></script>
</code></pre>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/bjYt 著作权归作者所有。请勿转载和采集!