You can copy() from the console | CSS-Tricks

You can in Blink/WebKit, anyway. You can’t directly in JavaScript, as I’m sure that’s some security (or good taste) issue that just isn’t allowed. Sites that do it tend to rely on Flash. But it works in the console, and that can be all kinds of useful!

Your own little screen-scraper

This is how I find it the most useful. There is some content on a page, but it’s not very easy to copy-and-paste with your mouse for whatever reason. Maybe some of it is hidden. Maybe it’s intermingled with stuff you don’t want.

But, it’s easy enough to use some quick JavaScript selectors to get your hands on what you want.

Imagine you’re looking at the CSS-Tricks Almanac.

And your goal is to get a comma-separated list of all the CSS properties. There are a number of ways to do it, but building your own quick little screen scraper in the console will do nicely.

var allItems = document.querySelectorAll(".property-list .children a");

var csv = "";

[].forEach.call(allItems, function(item) {
  // do whatever
  csv += item.text + ", ";
});

copy(csv);

Here it is output to the console, but it’s on the clipboard as well for easy moving.

I’ve even used it in the past on cdnjs.com to build a JSON object in just the format I wanted!

var newJSON = "[", name, url, thing;

$(".table-striped tbody tr").each(function(i, el) {

  thing = $(el);

  name = thing.find("td:first a").text();
  url = "https:";
  url += thing.find("td:last p").text();
  token = url.split("/");
  token = token[token.length - 1];
  token = token.split('.');
  token = token[0];

  newJSON += '{\n';
  newJSON += '  "name": "' + name + '",\n';
  newJSON += '  "value": "' + url + '",\n';
  newJSON += '  "tokens": ["' + token + '"]\n';
  newJSON += '},';

});

newJSON += "]";

copy(newJSON);

Have you ever used copy() for something you found useful?

Comments

Dave

# February 3, 2015

Nice, I really dig these kinds of hacks!

They kind of double as a nice introduction to document.querySelectorAll and the forEach function in javascript. I admit, my JS is a little rusty and the capital E in forEach threw me for a loop when I first saw it but a after RFTMing, it ended by a nice little lesson in and of itself.

Sascha Sigl

# February 3, 2015

Great! I have a usecase for this. In this pen I want to store the audio data generated by the HTML5 Audio Api. My “workaround” for saving the Object was to run the console.save() snippet from DevTools Snippet. But this one is more convenient. Thanks!

Tom Davies

# February 3, 2015

That copy() trick is really neat, but building a string in order to write out JSON is pretty icky and really not something to encourage, JSON.stringify() is the real way to do that from JS.

Chris Coyier

Permalink to comment# February 7, 2015

That’s great if the data is already on the page in the form of an object. It wasn’t here. Are you saying it would be better to create an object first and then stringify that object?

Amelia Bellamy-Royds

# February 3, 2015

You can’t directly in JavaScript, as I’m sure that’s some security (or good taste) issue that just isn’t allowed.

There’s a clipboard API draft spec that will allow web apps more control over copy and paste events. But as you expected, strict security rules would prevent you from accessing the system clipboard for anything other than a user-initiated action:

The implementation may allow other trusted event types to modify the clipboard if the implementation authors believe that those event types are likely to express user intention. The implementation may also support configuration that trusts specific sites or apps to modify the clipboard regardless of the origin of the scripting thread.

Synthetic paste events must not give a script access to data on the real system clipboard.

Synthetic cut and copy events must not modify data on the system clipboard.

MaxArt

Permalink to comment# February 3, 2015

Yes, and it’s quite overdue considering that many sites still uses Flash just to have ZeroClipboard.

Susan

# February 4, 2015

Just a question I hope someone can answer about using classes eg:- PHP classes or Jquery to build applications- if you write multiple Ajax functions into an app, animation function, construct multiple databases and write over 100 000 lines of code using jquery but no other classes, is this considered normal, and would you then be able to say that the program resulting from this is your own work? How common is Jquery online in web building

Martin Pitt

# February 6, 2015

Why build the json manually?

I just tested in my devtools:

Copy:

copy(JSON.stringify({ name: 'foo', value: 1, tokens: [ 1, 2, 3 ] }, null, '\t'))

Paste:

{
    "name": "foo",
    "value": 1,
    "tokens": [
        1,
        2,
        3
    ]
}

Even easier:

copy({ name: 'foo', value: 1, tokens: [ 1, 2, 3 ] })

Paste:

{
  "name": "foo",
  "value": 1,
  "tokens": [
    1,
    2,
    3
  ]
}

Order of arguments are pretty much guaranteed:

var obj = {};
obj.name = 'foo';
obj.value = 1;
obj.tokens = [ 1, 2, 3 ];
copy(obj);

Paste:

{
  "name": "foo",
  "value": 1,
  "tokens": [
    1,
    2,
    3
  ]
}

Chris Coyier

Permalink to comment# February 7, 2015

Again that’s great if you already have an object that is formatted just how you want it. In this case I was traipsing through the DOM finding the little bits I needed, it wasn’t already a nice object. If it was, certainly that’s a good trick to just stringify and copy the object.

This comment thread is closed. If you have important information to share, please contact us.