So I have created a node.js app that generates meta tags…like the annoying ones for social media. i have videos showing it working Video Showing How it Works. Anyhow. I wanted to add a copy button like you see everywhere. I got it working with a little JQuery script.
var $copyButton = $('#meta-copy');
function copyToClipboard(){
var $results = $('#meta-results');
console.log($results[0].innerText)
var $temp = $('<input>');
$('body').append($temp);
$temp.val($results[0].innerText).select();
document.execCommand("copy");
$temp.remove();
}
$copyButton.click(copyToClipboard)
I have tried many iterations of this. When the console.log shows up everything is formatted correctly.
The problem is not matter what i do I cannot get newlines after each tag when I paste. When I paste with my button it is one continuous line. I have tried splitting on (><) and joining with(>\n,etc<) When i use native copy and paste it includes the formatting. What gives?
I have learned the hard way that newline (\n) is a major disappointment and doesn’t work in many situations. I have used misc workarounds like for example when I have a string template I’ll add <br />
also tried split('><').join(> <) and a slew of regular expressions and joins using <br/>\n&carr; striking out every time
hahaha br in string literal works here! but not in my script with copy!
i know it is a small detail but, these copy buttons are all over the place and they work, i maybe my entire approach is not right? idk. its a cool feature to have for any site that allows you to copy code. not needed ofcourse but cool non the less
yes the <br/> works great for displaying the html view of the tags. like in the pic i posted. and when i manually highlight copy and paste that it is fine. and even my value i console.log after hitting the button looks right. somehow in the select and copy process the formatting disappears this is such a little thing, and I cannot figure it out, these types of things are what drive me crazy in coding.
It seems you want a simple copy of some part of the page - you create a temporary <input> for copying the content then select it - this is unnecessary - you can directly copy any part of the page to the clipboard
btw it helps if you provide all your code together in the post - it was a little hard to figure out what’s going on from the scattered snippets, images and video
awesome! it works. thanks for the help. this was my first try using document.execCommand("copy"). i had no idea where to start with this stuff so i was just going off that jquery script, which i found randomly on codepen. i am going to be looking into createRange , selectNode, etc since I had never heard of them until now.
i won’t be so hesitant to just lay out all the code up front in the future, i started here like 3 months ago so i pretty much a newb in most things coding. i guess the more info on a specific problem the better. thanks again, i probably spent 4hrs tinkering with this stupid button.
Since you’re inserting information dynamically, you may also consider storing your string as a template literal on the server side. You can use placeholders for the variable parts and it preserves line breaks.
cool. this is an interesting idea, i think i would have had the same issue with my original jquery code though. i think u are saying this would be the actual piece of data i send to the template/client vs just sending the dynamic stuff to a conditional statement. doing the latter, i went haywire with spans and classes, so, getting my output to have that syntax highlighted look. i’m not sure i could do that this way. javascript is so crazy, most def a case of the more i know the less i’m sure of. right now im working on configuring a react setup with webpack from scratch…needless to say, i feel more HELP posts in my future. thanks for the reply.
