Quiero copiar un texto en el portapapeles, pero en una nueva línea.

Problema:

Si usted haga clic en el botón en el fragmento de código y pegar en el bloc de notas esto es lo que vas a obtener:

Nombre: testSurname: testEmail: [email protected]: testCity: testCountry: nullAd Categoría: testPlan: nullWebsite: nombre de la Empresa: testΜήνυμα: prueba

Lo que quiero:

Quiero, si es posible, para copiar texto en una nueva línea. El mismo que cuando se copia:

Nombre: prueba

Apellido: prueba

Email: [email protected]

JS:

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!");
});

HTML:

<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>

También he probado a sustituir <br> con \n y \r\n mediante la adición de la siguiente regla css a mi div: white-space:pre-wrap; sin signos de éxito.

InformationsquelleAutor | 2017-09-04

4 Comentarios

  1. 18

    Usted tiene un par de problemas con el código.

    Primer problema en el código es la $(element).text()jquery text() tiras de su código de html, incluyendo la <br> etiquetas. Así que no hay saltos de línea en el texto del portapapeles desde todos los saltos de línea en html son despojados.. así que nada a reemplazar.

    Si quieres mantener <br> como saltos de línea que usted necesita para utilizar .html() y analizar su texto más manualmente.

    Segundo problema es que el uso de <input> etiqueta. <input> etiqueta es solamente de una de las líneas de modo que u no puedo tener ningún salto de línea allí. usted necesidad de utilizar <textarea> para la conversión.

    El último problema es el de arriba que usted también debe usar \r\n para los usuarios de windows.

    He actualizado el fragmento con una versión de trabajo.

    JS:

    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!");
    });

    HTML:

    <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. 6

    No jQuery Solución para simplemente copiar una cadena de caracteres con los saltos de línea al portapapeles

    Por favor, consulte los comentarios de código para mayor claridad.

    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);
        }
  3. 1

    Su código es probable que esté trabajando bien, pero el Bloc de notas no puede manejar Unix’ \n salto de línea, sólo puede manejar \r\n y esta es la razón por la que no los ves.

    Por favor descargue el más avanzado editor como Notepad++, https://notepad-plus-plus.org) y tratar de pegarlo ahí. Y no sólo eso, sino que tiene un montón de otras características muy interesantes como el resaltado de sintaxis, macros y complementos, así que vale la pena usarlo para más fines que los que.

    Si quieres hacer la nueva línea de trabajo en aplicaciones de MS, es necesario sustituir los saltos de línea antes de que usted copia mediante el uso de esta línea:

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

    Para la impresión en HTML que usted necesita para reemplazar \n
    , como este:

    $temp = $temp.replace(/\n/g, "<br>");
    • en realidad, quiero copiar en el outlook de Microsoft (windows 10 app). Lo mismo que no hay saltos de línea
    • Que cómo puedo imprimir el texto con javascript: $("#error-details").html(Name: '+onoma+"<br>")+ donde debo poner que \r\n ?
    • por favor, consulte editado respuesta.
    • puedo añadir esta línea en la función, pero me sale este error "message": "Uncaught TypeError: $temp.replace is not a function" Si que trabajaron para usted siéntase libre de copiar un fragmento de su respuesta con la solución
    • Hizo el trabajo para usted?
    • He intentado lo siguiente en la consola y funcionó: var $temp = "abcd\nabcd"; $temp = $temp.replace(/\n/g, "\r\n"); console.log($temp); // ==> abcd\r\nabcd
    • Su respuesta resuelve solo una pequeña parte del problema.

  4. 1

    Dos cosas están mal:

    (1) de Acuerdo a la documentación de jquery para texto:

    El resultado de la .método text() es una cadena que contiene el texto refundido de todos los elementos coincidentes. (Debido a las variaciones en el código HTML de los analizadores en los diferentes navegadores, el texto devuelto puede variar en saltos de línea y otros espacios en blanco.)

    Y su ejemplo,

    <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>

    El código $( "div.demo-container" ).text() producirá:

    Demonstration Box list item 1 list item 2

    Tan sólo utilizar el html() lugar el método para obtener la innerHTML.


    (2) La <input> etiqueta elimina los saltos de línea. Uso textarea lugar. Ver: esta respuesta para obtener más información.


    Esperemos que este espineta de trabajo.

    JS:

    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!");
    });

    HTML:

    <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>

Dejar respuesta

Please enter your comment!
Please enter your name here