数据处理工具 - 文本替换和分割 - 常规

<!DOCTYPE html>/n<html>/n<head>/n<title>数据处理工具</title>/n<style>/n/tbody {/n/t/tfont-family: Arial, Helvetica, sans-serif;/n/t/tcolor: #333;/n/t/tbackground-color: #f5f5f5;/n/t}/n/n/th1, h3 {/n/t/ttext-align: center;/n/t/tmargin-top: 30px;/n/t}/n/n/ttextarea {/n/t/tdisplay: block;/n/t/tmargin: 10px auto;/n/t/tpadding: 5px;/n/t/tborder: 1px solid #ccc;/n/t/tmin-height: 100px;/n/t/tmin-width: 300px;/n/t/tresize: none;/n/t/tbackground-color: #fff;/n/t}/n/n/tbutton {/n/t/tdisplay: block;/n/t/tmargin: 10px auto;/n/t/tpadding: 5px 10px;/n/t/tbackground-color: #0077cc;/n/t/tcolor: #fff;/n/t/tborder: none;/n/t/tborder-radius: 5px;/n/t/tcursor: pointer;/n/t}/n/n/t#output {/n/t/tdisplay: flex;/n/t/tflex-wrap: wrap;/n/t/tjustify-content: center;/n/t}/n/n/t.box {/n/t/tmargin: 10px;/n/t/tpadding: 5px;/n/t/tborder: 1px solid #ccc;/n/t/tmin-height: 100px;/n/t/tmin-width: 300px;/n/t/tresize: none;/n/t/tbackground-color: #fff;/n/t}/n/n/t.download-button {/n/t/tdisplay: block;/n/t/tmargin: 10px auto;/n/t/tpadding: 5px 10px;/n/t/tbackground-color: #4CAF50;/n/t/tcolor: #fff;/n/t/tborder: none;/n/t/tborder-radius: 5px;/n/t/tcursor: pointer;/n/t}/n/n/t.download-link {/n/t/tdisplay: block;/n/t/ttext-align: center;/n/t/tmargin-top: 10px;/n/t}/n/n/t.success {/n/t/tcolor: green;/n/t}/n/n/t.error {/n/t/tcolor: red;/n/t}/n</style>/n</head>/n<body>/n/t<h1>数据处理工具</h1>/n/t<h3>文本替换</h3>/n/t<textarea id=/'replace-text/'></textarea>/n/t<button onclick=/'replaceText()/'>替换</button>/n/t<p>替换后的文本内容：</p>/n/t<textarea id=/'output-text/'></textarea>/n/t<p>出现了<span id=/'comma-count/'>0</span>个VCGID。</p>/n/n/t<h3>数据分割</h3>/n/t<textarea id=/'data/'></textarea>/n/t<button onclick=/'splitData()/'>提交</button>/n/t<div id=/'output/'></div>/n/t<button class=/'download-button/' onclick=/'downloadData()/'>下载数据</button>/n/t<p id=/'download-link/' class=/'download-link/'></p>/n/n/t<script>/n/t/tfunction replaceText() {/n/t/t/tvar inputText = document.getElementById(/'replace-text/').value;/n/t/t/tvar replacedText = inputText.replaceAll(/[/s/n']/g, /',/');/n/t/t/treplacedText = replacedText.replaceAll(/,{2,}/g, /',/');/n/t/t/tdocument.getElementById(/'output-text/').value = replacedText;/n/t/t/tdocument.getElementById(/'comma-count/').innerHTML = (replacedText.match(/,/g) || []).length;/n/t/t}/n/n/t/tfunction splitData() {/n/t/t/tvar data = document.getElementById(/'data/').value;/n/t/t/tvar dataArray = data.split(/',/');/n/t/t/tvar output = document.getElementById(/'output/');/n/t/t/toutput.innerHTML = /'/';/n/t/t/tvar boxCount = Math.ceil(dataArray.length / 100);/n/t/t/tvar index = 0;/n/t/t/tfor (var i = 0; i < boxCount; i++) {/n/t/t/t/tvar box = document.createElement(/'textarea/');/n/t/t/t/tbox.classList.add(/'box/');/n/t/t/t/tvar boxData = /'/';/n/t/t/t/tfor (var j = 0; j < 100; j++) {/n/t/t/t/t/tif (index >= dataArray.length) {/n/t/t/t/t/t/tbreak;/n/t/t/t/t/t}/n/t/t/t/t/tboxData += dataArray[index] + /',/';/n/t/t/t/t/tindex++;/n/t/t/t/t}/n/t/t/t/tboxData = boxData.slice(0, -1);/n/t/t/t/tbox.value = boxData;/n/t/t/t/toutput.appendChild(box);/n/t/t/t}/n/t/t}/n/n/t/tfunction downloadData() {/n/t/t/tvar boxes = document.getElementsByClassName(/'box/');/n/t/t/tvar data = /'/';/n/t/t/tfor (var i = 0; i < boxes.length; i++) {/n/t/t/t/tdata += boxes[i].value.replaceAll(/',/', /'//t/') + /'//n/';/n/t/t/t}/n/t/t/tvar blob = new Blob([data], { type: /'text/plain;charset=utf-8/' });/n/t/t/tvar fileName = /'data_/' + new Date().getTime() + /'.txt/';/n/t/t/tif (navigator.msSaveBlob) {/n/t/t/t/tnavigator.msSaveBlob(blob, fileName);/n/t/t/t} else {/n/t/t/t/tvar link = document.createElement(/'a/');/n/t/t/t/tlink.href = URL.createObjectURL(blob);/n/t/t/t/tlink.download = fileName;/n/t/t/t/tlink.click();/n/t/t/t}/n/t/t/tshowDownloadLink(fileName);/n/t/t}/n/n/t/tfunction showDownloadLink(fileName) {/n/t/t/tvar link = document.getElementById(/'download-link/');/n/t/t/tlink.innerHTML = /'已成功下载数据文件：/' + fileName;/n/t/t/tlink.classList.add(/'success/');/n/t/t/tsetTimeout(function() {/n/t/t/t/tlink.innerHTML = /'/';/n/t/t/t/tlink.classList.remove(/'success/');/n/t/t/t}, 5000);/n/t/t}/n/t</script>/n</body>/n</html>/n