Copy with JS. Formatting for newlines. Stumped StackOverflow


#1

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?

MDN REFERENCE
Range
Range.selectNode()
window.getSelection()
document.execCommand()


#2

Can you give us an example of what the output looks like?


#3

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

.


#4

you see my console.log is formatted…
but output is literally this one line(i didnt fill out my actual form so some are blank):

<meta charset="utf-8" /><meta name="viewport content" content="width=device-width, initial-scale=1" /><title>""</title><meta name="author" content="Benjamin Brooke" /><meta name="description" content="" /><meta property="og:url" content="" /><meta property="og:type" content="website" /><meta property="og:title" content="" /><meta property="og:description" content="" /><meta property="og:image" content="https://s3-us-west-1.amazonaws.com/benjaminadk/ben@gmail.com/looselady (1).jpeg" /><meta name="twitter:card" content="summary_large_image" /><meta name="twitter:creator" content="" /><meta name="twitter:title" content="" /><meta name="twitter:description" content="" /><meta name="twitter:image" content="https://s3-us-west-1.amazonaws.com/benjaminadk/ben@gmail.com/looselady (1).jpeg" />

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


#5

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.


#6

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

here’s some meta tags like yours

<button id=copy type=button>Copy</button>
<p>
&lt;meta charset=utf-8><br>
&lt;meta name=viewport content="width=device-width, initial-scale=1"><br>
&lt;meta property=og:type content=website><br>
&lt;meta name=twitter:card content=summary_large_image>
</p>

here’s the code to copy the contents of the <p> tag

copy.addEventListener("click", e=>{
  const p=e.target.nextElementSibling
  const r=document.createRange()
  r.selectNode(p)
  window.getSelection().addRange(r)
  document.execCommand("copy")
})

here’s the pasted text


<meta charset=utf-8>
<meta name=viewport content="width=device-width, initial-scale=1">
<meta property=og:type content=website>
<meta name=twitter:card content=summary_large_image>


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


#7

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.


#8

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.

function createTags(title, author, description) {
    return `<meta charset="utf-8" />
			<meta name="viewport content" content="width=device-width, initial-scale=1" />
			<title>${title}</title>
			<meta name="author" content="${author}" />
			<meta name="description" content="${description}" />
			<meta property="og:url" content="" />
			<meta property="og:type" content="website" />
			<meta property="og:title" content="${title}" />
			<meta property="og:description" content="${description}" />
			<meta property="og:image" content="https://s3-us-west-1.amazonaws.com/benjaminadk/ben@gmail.com/looselady (1).jpeg" />
			<meta name="twitter:card" content="summary_large_image" />
			<meta name="twitter:creator" content="" />
			<meta name="twitter:title" content="" />
			<meta name="twitter:description" content="" />
			<meta name="twitter:image" content="https://s3-us-west-1.amazonaws.com/benjaminadk/ben@gmail.com/looselady (1).jpeg" />`
}

I’m not sure if that will keep the line breaks by the time it’s reached the client, but you can change this to fit ppc’s solution as well.


#9

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.