<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta charset="utf-8" />
    <title>为内容里面的英文、数字自动加上空格</title>

    <link rel="stylesheet" href="https://npm.elemecdn.com/bootstrap@4.6.0/dist/css/bootstrap.min.css" />
    <script src="https://npm.elemecdn.com/pangu@4.0.7/dist/browser/pangu.min.js"></script>
</head>

<body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12 mt-3">
                <textarea class="form-control nr-txt1" placeholder="粘贴内容,为内容里面的英文、数字自动加上空格"></textarea>
            </div>
        </div>
    </div>
    <iframe src="https://ss.netnr.com/diff#hide-menu" scrolling="no" frameborder="0"
        style="width:100%;visibility:hidden;"></iframe>
</body>

</html>
var df = {
    de: document.querySelector('iframe'),
    init: function () {
        document.querySelector('.nr-txt1').oninput = function () {
            df.setDiff(this.value, pangu.spacing(this.value))
        }

        window.onload = window.onresize = function () {
            df.resize()
        };
    },

    resize: function () {
        var ch = document.documentElement.clientHeight - df.de.getBoundingClientRect().top - 10;
        df.de.style.height = Math.max(100, ch) + "px";
    },

    setDiff: function (origin, vary) {
        var iframe = df.de;
        iframe.style.visibility = "visible";
        iframe.contentWindow.postMessage(JSON.stringify({ origin, vary }), iframe.src);
    }
}

df.init();