Estoy usando el siguiente script para copiar un div al portapapeles. Pero estoy tratando de copiar varios divs ( DivA + DivB ) con el mismo botón, mientras agrego algunas comillas y corchetes alrededor de cada div. Vi algunas respuestas (como esta y esta ), pero parece que no puedo implementarlas en el script actual.
Entonces la salida debería ser como:
"A certain quote" (Author Name).Este es el script actual para copiar un div.
function copyToClipboard(element) { var $temp = $("<input>"); $("body").append($temp); $temp.val($(element).text()).select(); document.execCommand("copy"); $temp.remove(); } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="divA"> <p>A certain quote</p> </div> <div id="divB"> <p>Author Name</p> </div> <button onclick="copyToClipboard('#divA')">Copy</button>El problema es que solo estás leyendo el texto de '#divA', ya que ese es el selector pasado a la función copyToClipboard() .
Para hacer lo que necesita, modifique la lógica para crear una cadena en el formato que necesita que contenga el texto de #divA y #divB :
let $divA = $('#divA'); let $divB = $('#divB'); $('button').on('click', e => { copyToClipboard(`"${$divA.text().trim()}" (${$divB.text().trim()}).`); }); function copyToClipboard(text) { var $temp = $("<input>"); $("body").append($temp); $temp.val(text).select(); document.execCommand("copy"); $temp.remove(); } textarea { width: 300px; height: 30px; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="divA"> <p>A certain quote</p> </div> <div id="divB"> <p>Author Name</p> </div> <button type="button">Copy</button><br /><br /> Paste here to test:<br /> <textarea></textarea>