Sie können es in Blink/WebKit, jedenfalls. Sie können es nicht direkt in JavaScript tun, da dies meiner Meinung nach ein Sicherheitsproblem (oder ein Problem des guten Geschmacks) ist, das einfach nicht erlaubt ist. Seiten, die dies tun, verlassen sich normalerweise auf Flash. Aber es funktioniert in der Konsole, und das kann in vielerlei Hinsicht nützlich sein!
Ihr eigener kleiner Screen-Scraper
So finde ich es am nützlichsten. Es gibt einige Inhalte auf einer Seite, aber aus irgendeinem Grund ist es nicht sehr einfach, sie mit der Maus zu kopieren und einzufügen. Vielleicht ist ein Teil davon versteckt. Vielleicht ist es mit Dingen vermischt, die Sie nicht wollen.
Aber es ist einfach genug, einige schnelle JavaScript-Selektoren zu verwenden, um an das zu gelangen, was Sie wollen.
Stellen Sie sich vor, Sie betrachten das CSS-Tricks-Almanach.
Und Ihr Ziel ist es, eine kommagetrennte Liste aller CSS-Eigenschaften zu erhalten. Es gibt eine Reihe von Möglichkeiten, dies zu tun, aber das Erstellen Ihres eigenen kleinen Screen-Scrapers in der Konsole wird gut funktionieren.
var allItems = document.querySelectorAll(".property-list .children a");
var csv = "";
[].forEach.call(allItems, function(item) {
// do whatever
csv += item.text + ", ";
});
copy(csv);Hier ist die Ausgabe in der Konsole, aber sie befindet sich auch in der Zwischenablage zum einfachen Verschieben.
Ich habe es sogar schon auf cdnjs.com verwendet, um ein JSON-Objekt in genau dem Format zu erstellen, das ich wollte!
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);
Haben Sie copy() jemals für etwas verwendet, das Sie nützlich fanden?
Schön, ich liebe diese Art von Hacks!
Sie dienen gewissermaßen als schöne Einführung in `document.querySelectorAll` und die `forEach`-Funktion in JavaScript. Ich gebe zu, mein JS ist ein wenig eingerostet und das große E in `forEach` hat mich erst einmal ins Schleudern gebracht, aber nach dem Lesen und Verstehen war es am Ende eine schöne kleine Lektion für sich.
Großartig! Ich habe einen Anwendungsfall dafür. In diesem Pen möchte ich die vom HTML5 Audio API generierten Audiodaten speichern. Meine "Workaround" zum Speichern des Objekts war, den `console.save()`-Snippet von DevTools Snippet auszuführen. Aber dieses hier ist praktischer. Danke!
Dieser `copy()`-Trick ist wirklich nett, aber das Erstellen eines Strings, um JSON auszugeben, ist ziemlich mühsam und wirklich nichts, was man fördern sollte. `JSON.stringify()` ist der richtige Weg, das aus JS zu tun.
Das ist großartig, wenn die Daten bereits in Form eines Objekts auf der Seite vorhanden sind. Hier war es das nicht. Meinen Sie, es wäre besser, zuerst ein Objekt zu erstellen und dieses dann zu stringifizieren?
Es gibt eine Clipboard API Draft Spezifikation, die es Webanwendungen ermöglicht, mehr Kontrolle über Kopiervorgänge und Einfügeereignisse zu haben. Aber wie Sie erwartet haben, würden strenge Sicherheitsregeln verhindern, dass Sie auf die System-Zwischenablage für alles andere als eine benutzerinitiierte Aktion zugreifen können.
Ja, und es ist ziemlich überfällig, wenn man bedenkt, dass viele Seiten immer noch Flash verwenden, nur um ZeroClipboard zu haben.
Nur eine Frage, die ich hoffe, jemand beantworten kann, bezüglich der Verwendung von Klassen z.B. PHP-Klassen oder Jquery zum Erstellen von Anwendungen - wenn man mehrere Ajax-Funktionen in eine App schreibt, Animationsfunktion, mehrere Datenbanken konstruiert und über 100.000 Codezeilen mit Jquery schreibt, aber keine anderen Klassen, ist das normal, und kann man dann sagen, dass das resultierende Programm die eigene Arbeit ist? Wie verbreitet ist Jquery online beim Web-Bauen?
Warum das JSON manuell erstellen?
Ich habe es gerade in meinen Devtools getestet
Kopieren
Einfügen
Noch einfacher
Einfügen
Die Reihenfolge der Argumente ist so gut wie garantiert
Einfügen
Auch hier ist das großartig, wenn Sie bereits ein Objekt haben, das genau so formatiert ist, wie Sie es möchten. In diesem Fall habe ich mich durch das DOM geklickt und die kleinen Teile gefunden, die ich brauchte, es war noch kein schönes Objekt. Wenn es so gewesen wäre, wäre das sicherlich ein guter Trick, das Objekt einfach zu stringifizieren und zu kopieren.