it-swarm.com.ru

Копировать в буфер обмена с линией разрыва

Я хочу скопировать текст в буфер обмена, но в новой строке.

Проблема:

Если вы нажмете кнопку во фрагменте и вставите в блокнот, вот что вы получите:

Имя: testSurname: testEmail: [email protected] Адрес: testCity: testCountry: nullAd Категория: 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> на \n и \r\n, добавив следующее правило css в мой div: white-space:pre-wrap; без каких-либо признаков успеха.

8
user7038047

У вас есть несколько проблем с кодом.

Первая проблема в вашем коде заключается в том, что текст $(element).text()jquery () извлекает ваш код из html, включая теги <br>. Таким образом, нет никаких новых строк в тексте буфера обмена, так как все html новые строки удалены ... так что ничего не заменить.

Если вы хотите сохранить <br> в качестве символов новой строки, вам нужно использовать .html() и анализировать текст более вручную.

Вторая проблема заключается в том, что вы используете тег <input>. Тег <input> состоит только из одной строки, поэтому вы не можете использовать новую строку. вам нужно использовать <textarea> для конвертации.

Последняя проблема заключается в том, что вы также должны использовать \r\n для пользователей Windows.

Я обновил ваш фрагмент с рабочей версией.

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>

18
JohanSellberg

Non-jQuery Solution просто скопировать строку с разрывом строки в буфер обмена

Пожалуйста, обратитесь к комментариям кода для ясности.

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);
    }
5
keshavDulal

Две вещи не так:

(1) Согласно документации 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>

1
TheChetan

Ваш код, вероятно, работает хорошо, но Блокнот не может обрабатывать символы новой строки Unix, он может обрабатывать только\r\n, и поэтому вы их не видите.

Пожалуйста, скачайте более продвинутый редактор (например, Notepad ++, https://notepad-plus-plus.org ) и попробуйте вставить его туда. И не только это, но и множество других очень интересных функций, таких как подсветка синтаксиса, макросы и плагины, так что стоит использовать его для большего количества целей. 

Если вы хотите, чтобы новые строки работали в приложениях MS, вам нужно заменить новые строки непосредственно перед копированием, используя следующую строку:

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

Для печати в HTML вам нужно заменить\n на 
, как это:

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