web-dev-qa-db-ja.com

ブレークラインを使用してクリップボードにコピー

テキストをクリップボードにコピーしたいが、新しい行に入れたい。

問題：

スニペットのボタンをクリックしてメモ帳に貼り付けると、次のようになります。

名前：testSurname：testEmail：[email protected]：testCity：testCountry：nullAd Category：testPlan：nullWebsite：会社名：testΜήνυμα：test

私が欲しいもの：

可能であれば、改行でテキストをコピーしたいです。コピーするときと同じです：

名前：テスト
姓：テスト
メール：[email protected]
...

function copyToClipboard(element) {
  var $temp = $("<input>");
  $("body").append($temp);
  $temp.val($(element).text()).select();
  document.execCommand("copy");
  $temp.remove();
}

$( "#FailCopy" ).click(function() {
  alert("Well done! div #error-details has been copy to your clipboard, now paste it in the notepad or email!");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!--text that i want to copy-->
    <h2>Div #error-details: the text I want to copy to clipboard:</h2>
    <er id="error-details">Name: test<br>Surname: test<br>Email: [email protected]<br>Address: test<br>City: test<br>Country: null<br>Ad Category: test<br>Plan: null<br>Website: <br>Company name: test<br>Μήνυμα: test</er>

    <br><br>
    
    <button id="FailCopy" type="button"  
     onclick="copyToClipboard('er#error-details')">Copy div to clipboard</button>

私はまた、<br> with \nおよび\r\n次のcssルールをdivに追加することにより：white-space:pre-wrap;成功の兆候なし。

javascriptjquerycopyclipboard
9
user7038047

コードにいくつかの問題があります。

コードの最初の問題は、$(element).text() jquery text（）が_<br>_タグを含むHTMLからコードを削除することです。したがって、すべてのhtml改行が削除されるため、クリップボードテキストには改行はありません。

_<br>_を改行として保持する場合は、.html()を使用し、テキストをより手動で解析する必要があります。

2番目の問題は、_<input>_タグを使用することです。 _<input>_タグは1行のみであるため、改行を入れることはできません。変換には_<textarea>_を使用する必要があります。

最後の問題は、上記のとおり、Windowsユーザーに対して_\r\n_も使用する必要があることです。

スニペットを動作バージョンに更新しました。

_function copyToClipboard(element) {
  var $temp = $("<textarea>");
  var brRegex = /<br\s*[\/]?>/gi;
  $("body").append($temp);
  $temp.val($(element).html().replace(brRegex, "\r\n")).select();
  document.execCommand("copy");
  $temp.remove();
}

$( "#FailCopy" ).click(function() {
  alert("Well done! div #error-details has been copy to your clipboard, now paste it in the notepad or email!");
});_
_<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!--text that i want to copy-->
    <h2>Div #error-details: the text I want to copy to clipboard:</h2>
    <er id="error-details">Name: test<br>Surname: test<br>Email: [email protected]<br>Address: test<br>City: test<br>Country: null<br>Ad Category: test<br>Plan: null<br>Website: <br>Company name: test<br>Μήνυμα: test</er>

    <br><br>
    
    <button id="FailCopy" type="button"  
     onclick="copyToClipboard('er#error-details')">Copy div to clipboard</button>_
20
JohanSellberg

非jQueryソリューションで、改行を含む文字列をクリップボードにコピーするだけです

明確にするためにコードのコメントを参照してください。

function copyStringWithNewLineToClipBoard(stringWithNewLines){

    // Step 1: create a textarea element.
    // It is capable of holding linebreaks (newlines) unlike "input" element
    const myFluffyTextarea = document.createElement('textarea');

    // Step 2: Store your string in innerHTML of myFluffyTextarea element        
    myFluffyTextarea.innerHTML = stringWithNewLines;

    // Step3: find an id element within the body to append your myFluffyTextarea there temporarily
    const parentElement = document.getElementById('any-id-within-any-body-element');
    parentElement.appendChild(textarea);

    // Step 4: Simulate selection of your text from myFluffyTextarea programmatically 
    myFluffyTextarea.select();

    // Step 5: simulate copy command (ctrl+c)
    // now your string with newlines should be copied to your clipboard 
    document.execCommand('copy');

    // Step 6: Now you can get rid of your fluffy textarea element
    parentElement.removeChild(myFluffyTextarea);
    }
6
keshavDulal

次の2つが間違っています。

（1） text のjqueryドキュメントによると：

.text（）メソッドの結果は、一致したすべての要素の結合テキストを含む文字列です。 （ブラウザによってHTMLパーサーが異なるため、返されるテキストは改行やその他の空白が異なる場合があります。）

そしてその例、

_<div class="demo-container">
    <div class="demo-box">Demonstration Box</div>
    <ul>
        <li>list item 1</li>
        <li>list <strong>item</strong> 2</li>
    </ul>
</div>
_

コード$( "div.demo-container" ).text()は以下を生成します：

_Demonstration Box list item 1 list item 2_

そのため、代わりにhtml()メソッドを使用してinnerHTMLをフェッチします。

（2）_<input>_タグは改行を削除します。代わりにtextareaを使用してください。詳細については、 この回答 を参照してください。

このスピネットが機能することを願っています。

_function copyToClipboard(element) {
  var $temp = $("<textarea>");
  $("body").append($temp);
  var html = $(element).html();
  html = html.replace(/<br>/g, "\n"); // or \r\n
  console.log(html);
  $temp.val(html).select();
  document.execCommand("copy");
  $temp.remove();
}

$( "#FailCopy" ).click(function() {
  alert("Well done! div #error-details has been copy to your clipboard, now paste it in the notepad or email!");
});_
_<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!--text that i want to copy-->
<h2>Div #error-details: the text I want to copy to clipboard:</h2>
<er id="error-details">Name: test<br>Surname: test<br>Email: [email protected]<br>Address: test<br>City: test<br>Country: null<br>Ad Category: test<br>Plan: null<br>Website: <br>Company name: test<br>Μήνυμα: test</er>

<br><br>
    
<button id="FailCopy" type="button"  
     onclick="copyToClipboard('er#error-details')">Copy div to clipboard</button>_
2
TheChetan

コードはおそらく正常に機能していますが、メモ帳はUnixの\ n改行を処理できません。\ r\nしか処理できないため、表示されません。

より高度なエディター（Notepad ++、 https://notepad-plus-plus.org など）をダウンロードして、そこに貼り付けてみてください。それだけでなく、構文の強調表示、マクロ、プラグインなど、他の非常に優れた機能も多数備えているため、それ以外の目的で使用する価値があります。

MSアプリで改行を機能させる場合、次の行を使用してコピーする直前に改行を置き換える必要があります。

$temp = $temp.replace(/\n/g, "\r\n");

HTMLで印刷するには、\ nを次のように置き換える必要があります。
、 このような：

$temp = $temp.replace(/\n/g, "<br>");
1
Aenadon