Question

在CSS中，.someclass { text-transform: uppercase }将所有带有someclass类的文本翻译为大写，但当我选择文本，复制并粘贴到文本编辑器或电子邮件中时，这些字母保留了原始案例。但CSS并不支持Unicode中定义的字母大小写以外的转换。对我之前的问题Display one letter as another in page while copying untransformed text的评论和回答建议将其搞砸并使用JavaScript，因为单靠CSS无法完成。（这需要一些明显的通知，即脚本尚未应用，例如在脚本运行时隐藏的CSS。）

在没有Flash的JavaScript中，如何替换所有文本节点中的字符，但是剪贴板和搜索不能反映转换？例如，我可能希望将r更改为w，以使ruby wings显示为wuby wings，但选择文本，复制文本并将其粘贴到记事本中会产生ruby wings和Ctrl + F ruby找到了这个。

我会将原始文本存储在某处，捕获复制事件，计算所选文本中的字符，并从原始文本中复制相同的范围。但这对Ctrl + F没有任何帮助。 How to copy to the clipboard in JavaScript?的答案建议使用零剪贴板，它依赖于未安装在移动或自由浏览器上的Adobe Flash Player。此外，oncopy is nonstandard撰写本文时。或者我是否也必须将其吸收并使用Flash，然后在没有Flash的情况下复制并发现行为异常？

Answer 1

也许不是您要寻找的解决方案，但您是否考虑过创建自定义字体？快速谷歌搜索，你会想出很多选择...

Answer 2

脚本需要在文本节点中搜索相关字母，但跳过不会呈现为文本的元素中的文本节点，例如<style>和<script>。然后使原始字母不可见但可复制，并使用CSS生成的内容生成替换字母。

要在Firefox中保留不可见的元素，您无法使用visibility: hidden或display: none。而是使用opacity: 0。然后使用pointer-events: none使其无法点击并使用position: absolute来抑制所占用的空间。

实际上需要三个span元素才能产生所有行为：

fuddinner隐藏原始信件
fudduc / fuddlc生成新信件
fuddouter会在新信件

咨询的作品：

＆＃13;

function classcontains(hayel, needle) {
    "use strict";
    needle = " " + needle + " ";
    var hayclass = " " + hayel.className + " ";
    return hayclass.replace(/[\n\t\r]/g, " ").indexOf(needle) > -1;
}

function fuddize(root) {
    "use strict";
    var textNodes = [];
    var contains = {}.hasOwnProperty;

    var blacklist = {
        br:1, hr:1,
        script:1, style:1, img:1, video:1, audio:1, canvas:1, svg:1, map:1, object:1,
        input:1, textarea:1, select:1, option:1, optgroup: 1, button:1
    };
    var replacements = [
        ["R","fudduc"], ["r","fuddlc"], ["L","fudduc"], ["l","fuddlc"]
    ];
    var outerclassname = "fuddouter";
    var innerclassname = "fuddinner";

    function addTextNodesInEl(el) {
        var tag = el.nodeName.toLowerCase();
        if (contains.call(blacklist, tag)
            || classcontains(el, innerclassname)) {
            console.log("Skipping "+tag);
            return;
        }
        for (var i = 0; i < el.childNodes.length; i++) {
            var n = el.childNodes[i];
            if (n.nodeType == Node.TEXT_NODE) {
                textNodes.push(n);
            }
        }
    }
    
    function fuddize_node(n) {
        var i = 0;
        while (i < replacements.length) {
            var needle = replacements[i][0];
            var txt = n.nodeValue;
            var idx = txt.indexOf(needle);
            if (idx < 0) {
                i = i + 1;
                continue;
            }
            var lpart = txt.substring(0, idx);
            var rpart = txt.substring(idx + needle.length);
            var papa = n.parentNode;
            if (lpart !== "") {
                var lnode = document.createTextNode(lpart);
                papa.insertBefore(lnode, n);
                fuddize_node(lnode);
            }
            var outerel = document.createElement("span");
            outerel.className = outerclassname;
            var midel = document.createElement("span");
            midel.className = replacements[i][1];
            var innerel = document.createElement("span");
            innerel.className = innerclassname;
            innerel.appendChild(document.createTextNode(needle));
            midel.appendChild(innerel);
            outerel.appendChild(midel);
            papa.insertBefore(outerel, n);
            n.nodeValue = rpart;
        }
    }

    if (!document.querySelectorAll) return false;
    var els = root.querySelectorAll('*');
    [].forEach.call(els, addTextNodesInEl);
    [].forEach.call(textNodes, fuddize_node);
}

function fuddize_body() {
    fuddize(document.body);
}

document.addEventListener('DOMContentLoaded', fuddize_body);

＆＃13;

body { max-width: 32em; padding: 1em; line-height: 1.6; margin: 0 auto }
h1,h2,h3 { line-height: 1.2 }
h1 { margin-top: 0 }

.fuddinner { position: absolute; opacity: 0; pointer-events: none }
.fudduc:after { content: "W"; }
.fuddlc:after { content: "w"; }
.fuddouter { white-space: nowrap; }

＆＃13;

<h1>Lorem Ipsum</h1>
<p>
Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure.
</p>

＆＃13;

复制未转换的文本时替换文本中的字母

2 个答案: