Question

我会尝试尽可能简单地解释我的意思。我希望向用户显示一个弹出窗口，其中包含要复制（动态创建）的URL链接，例如（实际上文本更长）：

var url = "http://myweb.com/en/728,1,5a2a16,5e4f4f,4a3f7a,12,12";

并正确显示（我的意思是很好地打破这一行以适应弹出窗口）我使用零宽度空间所以代码看起来像这样：

var url = "http://myweb.com/en/728,&#8203;1,&#8203;5a2a16,&#8203;5e4f4f,&#8203;4a3f7a,&#8203;12,&#8203;12";
$("#content").html(url);

接下来，当弹出窗口显示时，我可以通过选择所有内容复制此文本并使用ctrl + c或只需单击一个按钮即可自动复制我用于该代码的一段谷歌代码：

window.getSelection().removeAllRanges();
var seltext = document.querySelector("#content");  
var range = document.createRange();  
range.selectNode(seltext);  
window.getSelection().addRange(range);  
var successful = document.execCommand("copy");

问题在我复制网址后开始（不管用哪种方式）并将其粘贴到浏览器中然后按回车键，之后我就明白了：

The requested URL myweb.com/en/728,â€‹1,â€‹5a2a16,â€‹5e4f4f,â€‹4a3f7a,â€‹12,â€‹12,â€‹12 was not found on this server.

当我删除零宽度空格字符并使用$("#content").text(url);（文本而不是html）时，问题就消失了但是后来我遇到了另一个正确的长换行问题。有人知道如何让这些东西一起工作吗？（因此该行将在我想要的区域中断 - 在逗号和复制功能之后不会复制任何额外的字符，只有这是用户在屏幕上看到的）

Answer 1

我认为你最好的解决方案就是使用CSS。请注意，在Firefox＆amp; IE中，您必须将锚点的显示属性设置为block，否则您将无法破解单词。

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Test 1</title>
        <style type="text/css">
            a { word-break: break-all; width: 150px; display: block;}
        </style>
    </head>

    <body>
        <a href="http://www">http://www.domain.com/TherearemanyvariationsofpassagesofLoremIpsumavailable,butthemajorityhavesufferedalterationinsomeform,byinjectedhumour,orrandomisedwordswhichdon'tlookevenslightlybelievable.IfyouaregoingtouseapassageofLoremIpsum,youneedtobesurethereisn'tanythingembarrassinghiddeninthemiddleoftext.AlltheLoremIpsumgeneratorsontheInternettendtorepeatpredefinedchunksasnecessary,makingthisthefirsttruegeneratorontheInternet.Itusesadictionaryofover200Latinwords,combinedwithahandfulofmodelsentencestructures,togenerateLoremIpsumwhichlooksreasonable.ThegeneratedLoremIpsumisthereforealwaysfreefromrepetition,injectedhumour,ornoncharacteristicwordsetc</a>
    </body>
</html>

这种方法将为您提供 CTRL + C 和execCommand("copy")的解决方案，因为网址并未真正更改。

如果你不能使用这种方法 - 你应该在调用execCommand之前从字符串中删除空白字符，以确保复制剥离字符串。

如果您真的想要execCommand（而不是CSS版本），那么您可以使用以下代码：

    <!doctype html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <title>Test 2</title>
            <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
            <style type="text/css">
                a { word-break: break-all; width: 150px; display: block;}
                .hidden {font-size:1px; width: 1px; height: 1px; overflow: hidden; position: absolute; left: -100000px; top: -10000px;}
            </style>
            <script type="text/javascript">
            var preventDoubleCall = false;
            function copyWrapper() {
                if (preventDoubleCall) {
                    preventDoubleCall = false;
                    return;
                }
                $('.hidden').text($('a').text().replace(/,/g, "This is the text to replace"))
                window.getSelection().removeAllRanges();
                var seltext = $(".hidden")[0];
                var range = document.createRange();
                range.selectNode(seltext);
                window.getSelection().addRange(range);
                preventDoubleCall = true;
                var successful = document.execCommand("copy");
            }
            $(function(){
                $(document).bind('copy', function() {
                    copyWrapper();
                });
                $('#click-to-copy').click(function() {
                    copyWrapper();
                });
            });
            </script>
        </head>

        <body>
            <a href="http://www">http://www.domain.com/TherearemanyvariationsofpassagesofLoremIpsumavailable,butthemajorityhavesufferedalterationinsomeform,byinjectedhumour,orrandomisedwordswhichdon'tlookevenslightlybelievable.IfyouaregoingtouseapassageofLoremIpsum,youneedtobesurethereisn'tanythingembarrassinghiddeninthemiddleoftext.AlltheLoremIpsumgeneratorsontheInternettendtorepeatpredefinedchunksasnecessary,makingthisthefirsttruegeneratorontheInternet.Itusesadictionaryofover200Latinwords,combinedwithahandfulofmodelsentencestructures,togenerateLoremIpsumwhichlooksreasonable.ThegeneratedLoremIpsumisthereforealwaysfreefromrepetition,injectedhumour,ornoncharacteristicwordsetc</a>
            <div class="hidden"></div>
            <button id="click-to-copy">Click here to copy</button>
        </body>
    </html>

您应该使用要替换的文本（换行符/逗号/等）更改替换行。我不得不使用“out of view”方法，因为你无法在隐藏元素上复制文本。无论您选择哪个部分，代码都将复制您想要的文本。如果您想要更改它，那么文本将只采用您选择的原始部分（而不是锚中的所有文本）。

使用零宽度空间和execCommand时出现冲突（＆＃34; copy＆＃34;）

1 个答案: