3f:null 40:["$","title",null,{"children":"Bookmarklet Find & Replace | audiocommander | Observable"}] 46:[] 44:{"id":"589f9d451a1b6a44","slug":"bookmarklet-find-replace","title":"Bookmarklet Find & Replace","thumbnail":"5956d21314602d3dad0d5a43818b63fa9451a507a91c783750a0c550b2ecba80","access_level":"public","create_time":"$D2019-05-08T23:11:22.285Z","update_time":"$D2019-05-09T12:42:23.318Z","view_time":null,"first_public_time":"$D2019-05-09T00:16:32.908Z","has_unpublished_edits":null,"fork":false,"stars":4,"starred":false,"owner":{"type":"team","id":"a39c9bdeddb6fd33","login":"audiocommander","name":"","avatar_url":"https://avatars-next.observableusercontent.com/dbb7d0acdb912e4dbc2a4b8e52893e132776d469bc482ba164ae11c34f26b107","tier":"starter_2024","bio":"","following":false},"version":296,"publish_version":296,"role":null,"authored":false,"authors":[{"type":"individual","id":"e0188214c65f4e32","login":"audiocommander","name":"","avatar_url":"https://avatars-next.observableusercontent.com/dbb7d0acdb912e4dbc2a4b8e52893e132776d469bc482ba164ae11c34f26b107","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"e0188214c65f4e32","login":"audiocommander","name":"","avatar_url":"https://avatars-next.observableusercontent.com/dbb7d0acdb912e4dbc2a4b8e52893e132776d469bc482ba164ae11c34f26b107","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Bookmarklet Find & Replace","cells":[{"id":0,"value":"md `# Bookmarklet Find & Replace`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"md`This is a step-by-step tutorial to write a find-and-replace function that will replace text found in the whole DOM of a website (iterating through all child elements). Finally, the script will be converted to a bookmarklet that can be applied to any website.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":262,"value":"md`We will need three interface elements: the string to search (haystack), the word to look for (needle) and the replacemant. Lucky for us, this is pretty easy to do with Observable, yay!` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"viewof teststring = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"md`*Quoted from* [Wikipedia](https://en.wikipedia.org/wiki/Bookmarklet)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"viewof find = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"viewof replace = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"value":"viewof modifiers = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":275,"value":"md`Now for something more exciting. This document has text. We can read this text and manipulate it, for example by replacing every occurence of a string with another string. Woohoo.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"md`## Script`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"function htmlreplace(find,replace,element) {\n if(typeof element === \"undefined\") { element = document.body; }\n var regEx = new RegExp(find, 'gi');\n var nodes = element.childNodes;\n for(var n=0; n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":224,"value":"md`## Bookmarklet`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":237,"value":"md`Search for [*{js uglify online}*](http://www.lmgtfy.com/?q=js+uglify+online), compress the script, and add \"javascript:\" to the beginning`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":279,"value":"md`you can also reload this page and copy the snippet below, as it's using our text-inputs. Or select the snippet and drag it into your bookmark-bar of your browser.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":230,"value":"md`javascript:function htmlreplace(e,t,o){void 0===o&&(o=document.body);for(var l=new RegExp(e,\"gi\"),n=o.childNodes,r=0;r