Html内嵌文字与文案比对

338 阅读1分钟

适用场景: 前端协议更新等。。。

<!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>