一种基于JS实现的解决海量文本复制难题的小程序

一、实现之前，我们需要知道几点关于JS的秘密

• JS 可以创建一个监听函数来监听当前页面的一些事件，比如 click、copy 或 paste 等等。

document.addEventListener = function("事件名称", function() {
      // do sth
})

• JS 可以篡改我们复制以后的内容

document.addEventListener('copy', function() {
        const clipboardData = event.clipboardData || window.clipboardData;
        console.log(clipboardData);
        if (!clipboardData) {
            return;
        }
        const text = window.getSelection().toString();
        let replace = "替换的文本";
        if (text) {
            event.preventDefault();
            clipboardData.setData("text/plain", replace);
        }
        console.log(window.getSelection().toString());
});

• JS 可以触发复制事件，并复制指定 tag 内的内容

二、实现标题描述的功能

• 文本可以按照我们的规则来拆分为若干个段落

    textSplitter = function () {
        /**
         * 这个是获取存储大量文本的 DOM，当然也可以是从后台获取这些文本，
         * 这里只是测试方便
         * @type {HTMLElement}
         */
        const dom = document.getElementById("display-window");
        let htmlTxt = "", step = 0, from = 0, len = tonsOfText.length - 1;
        for (let i = 0; i <= len; ++i) {
            // 由于标点符号有很多种，这里我选择1个空字符作为一个单位
            if (tonsOfText.charAt(i) === ' ') {
                ++step;
            }
            // 每 100 个空字符作为一个段落
            if (step === 100 || i === len) {
                htmlTxt +=
                    "
" +
                    "  "+ tonsOfText.substring(
                            from, i === len ? len + 1 : i + 1) + "" +
                    "  复制" +
                    "
"
                from = i;
                step = 0;
            }
        }
        dom.innerHTML = htmlTxt;
    }

• 将拆分后的每个段落分别用一个 tag 约束，并为这个 tag 创建一个兄弟标签，也就是 button。这个 button 点击时来调用我们处理文本的函数。注：下面的代码参考了 ​​​​​​​cplvfx 大佬的文章。该方案是采用触发复制事件，并复制指定的区域来实现的复制功能​​​​​​​​​​​​​​

    copyTxt = function (th) {
        // 获取父级 DOM 元素
        const parent = th.parentNode;
        // 获取该父级元素的所有子集元素
        const children = parent.childNodes;
        let replace;
        for (const c of children) {
            // 找到当前要复制的文本对应的 DOM 元素
            if (c instanceof HTMLSpanElement) {
                replace = c;
                break;
            }
        }
        // 创建复制区域
        const range = document.createRange();
        // 指定复制的标签，它会复制该标签内的文本
        range.selectNode(replace);
        const selection = window.getSelection();
        if (selection.rangeCount > 0) {
            selection.removeAllRanges();
        }
        selection.addRange(range);
        // 执行复制
        document.execCommand("Copy");
        selection.removeRange(range);
    }

三、实现完成

这个想法的背后实现技术很简单，相信经常阅读 CSDN 博客的朋友都应该知道某篇文章若涉及代码片段 ，右上角就会有一个“复制”按钮，其实这个点击复制代码的背后技术与这个差不多。那么，值得思考的是，这个功能应用在复制一篇上百万文字的场景时，会是一个不错的选择。而且，我们还可以利用算法给文本排版，添加标题，方便用户去根据自己喜好来复制，且减少了使用鼠标拉满屏幕来复制大量文本的繁琐。