适用场景: 前端协议更新等。。。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>代码与文案比对</title>
</head>
<style>
#input {
width: 200px;
height: 700px;
}
#btn {
margin: 0 10px;
}
#con {
width: 200px;
height: 700px;
}
</style>
<body>
<h3>推荐使用chrome浏览器<br />本功能支持删除换行、空格、html标签,自动复制转换后的文字</h3>
<div style="display: flex; align-items: center;">
<textarea type="text" id="input"></textarea>
<button id="btn">转换(自动复制)</button>
<textarea id="con"></textarea>
<button style="margin: 0 10px;">
<a target="_bank" href="https://tool.lu/diff/">去比对</a>
</button>
</div>
<script>
// 删除 特殊符号、换行、空格、标签,只保留纯文字
var inputEl = document.getElementById('input');
var btn = document.getElementById('btn');
var con = document.getElementById('con');
btn.addEventListener('click', function(){
var str = inputEl.value;
// 如有特殊符号在此处添加
var str1= str.replace(/[\•\`]/g,"");
var str2 = str1.replace(/\r\n/g, '');
var str3 = str2.replace(/\s+/g, '');
var text = str3.replace(/<\/?.+?\/?>/g, '');
con.innerHTML = text;
if(text) {
con.select();
document.execCommand("copy"); // 执行浏览器复制命令
alert("复制成功");
} else {
alert("请输入文本!");
}
})
</script>
</body>
</html>