!DOCTYPE htmlhtmlhead title文本处理工具title style textarea width 100; height 100px; margin-bottom 10px; button margin-right 10px; result margin-top 20px; border 1px solid black; pad
<!DOCTYPE html>
<html>
<head>
<title>文本处理工具</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
padding: 20px;
}
<pre><code> h1, h2 {
color: #333;
margin-bottom: 20px;
}
textarea {
width: 100%;
height: 100px;
margin-bottom: 10px;
padding: 10px;
border: none;
background-color: #fff;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
resize: none;
}
input[type="number"] {
padding: 10px;
border: none;
background-color: #fff;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
width: 150px;
margin-right: 10px;
}
button {
padding: 10px;
border: none;
background-color: #333;
color: #fff;
cursor: pointer;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
transition: background-color 0.2s ease;
}
button:hover {
background-color: #444;
}
.result {
margin-top: 20px;
border: none;
padding: 10px;
background-color: #fff;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
table {
border-collapse: collapse;
width: 100%;
margin-top: 20px;
border: none;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
background-color: #fff;
}
th, td {
text-align: center;
padding: 10px;
}
th {
background-color: #333;
color: #fff;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
</style>
</code></pre>
</head>
<body>
<h1>文本处理工具</h1>
<div>
<h2>文本替换工具</h2>
<textarea id="replace-text" placeholder="请输入您想要替换的内容"></textarea>
<button onclick="replaceText()">替换</button>
<p>替换后的文本内容：</p>
<p>出现了<span id="comma-count">0</span>个VCGID。</p>
<textarea id="output-text"></textarea>
</div>
<div>
<h2>文本分割工具</h2>
<textarea id="split-text" placeholder="请输入要分割的文本"></textarea>
<input type="number" id="split-size" placeholder="请输入每个分割块的大小">
<button onclick="splitText()">分割</button>
<table class="result" id="split-result"></table>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
<script>
// 替换文本
function replaceText() {
const inputText = document.getElementById("replace-text").value;
const replacedText = inputText.replaceAll(/["\s]+/g, ",");
document.getElementById("output-text").value = replacedText;
document.getElementById("comma-count").innerHTML = (replacedText.match(/,/g) || []).length;
}
<pre><code> // 分割文本
function splitText() {
const inputText = document.getElementById("split-text").value;
const splitSize = document.getElementById("split-size").value;
const dataArray = inputText.split(/\s*,\s*/);
const table = document.getElementById("split-result");
table.innerHTML = "";
const boxCount = Math.ceil(dataArray.length / splitSize);
for (let i = 0; i < boxCount; i++) {
const row = table.insertRow();
const start = i * splitSize;
const end = Math.min(start + splitSize, dataArray.length);
const data = dataArray.slice(start, end).join(",");
const cell = row.insertCell();
cell.innerHTML = data;
}
download(table.outerHTML, "excel");
}
// 下载文本
function download(text, type) {
const blob = new Blob([text], {type: "application/vnd.ms-excel;charset=utf-8"});
saveAs(blob, `data.${type}`);
}
</script>
</code></pre>
</body>
</html>
原文地址: http://www.cveoy.top/t/topic/bVUs 著作权归作者所有。请勿转载和采集!