Last active
September 27, 2024 21:36
-
-
Save closetgeekshow/46b0df48190518356e55c49fcd4aa662 to your computer and use it in GitHub Desktop.
Bookmarklet: Highlight Tables, Click to copy as TSV
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* I made this with assistance from Sourceforge Cody (https://sourcegraph.com/cody/chat) to help me copy the search results in Axure Cloud to an Excel file but it should be generic enough to work everywhere. I would recommend putting this script through an IIFE generator like Bookmarklet Maker (https://caiorss.github.io/bookmarklet-maker/) before putting it in a bookmark. | |
| **SUMMARY** | |
| 1. Creates and appends the necessary style for highlighting tables. | |
| 2. Highlights all tables with semi-transparent red overlays. | |
| 3. When a table is clicked: | |
| * Copies the table contents to the clipboard in TSV format. | |
| * Immediately cleans up by removing all added elements and styles. | |
| */ | |
| // Check if already running | |
| if (window.TableHighlighter && window.TableHighlighter.isRunning) { | |
| console.log("Table highlighting is already active."); | |
| return; | |
| } | |
| // Create or reset TableHighlighter | |
| window.TableHighlighter = { | |
| isRunning: true, | |
| createdElements: [], | |
| styleElement: null | |
| }; | |
| function createStyles() { | |
| const style = document.createElement('style'); | |
| style.textContent = ` | |
| .table-highlight { | |
| position: absolute; | |
| background-color: rgba(255, 0, 0, 0.3); | |
| cursor: pointer; | |
| z-index: 10000; | |
| } | |
| `; | |
| document.head.appendChild(style); | |
| return style; | |
| } | |
| function highlightTables() { | |
| window.TableHighlighter.styleElement = createStyles(); | |
| const tables = document.getElementsByTagName('table'); | |
| Array.from(tables).forEach(table => { | |
| const highlight = document.createElement('div'); | |
| highlight.className = 'table-highlight'; | |
| const rect = table.getBoundingClientRect(); | |
| highlight.style.top = `${rect.top + window.scrollY}px`; | |
| highlight.style.left = `${rect.left + window.scrollX}px`; | |
| highlight.style.width = `${rect.width}px`; | |
| highlight.style.height = `${rect.height}px`; | |
| highlight.addEventListener('click', (event) => { | |
| copyTable(table); | |
| event.stopPropagation(); | |
| }); | |
| document.body.appendChild(highlight); | |
| window.TableHighlighter.createdElements.push(highlight); | |
| }); | |
| document.addEventListener('keydown', handleEscapeKey); | |
| } | |
| function copyTable(table) { | |
| const rows = table.querySelectorAll('tr'); | |
| let tsv = ''; | |
| rows.forEach(row => { | |
| const cells = row.querySelectorAll('td, th'); | |
| tsv += Array.from(cells).map(cell => cell.textContent.trim()).join('\t') + '\n'; | |
| }); | |
| navigator.clipboard.writeText(tsv).then(cleanup); | |
| } | |
| function handleEscapeKey(event) { | |
| if (event.key === 'Escape') { | |
| cleanup(); | |
| } | |
| } | |
| function cleanup() { | |
| if (window.TableHighlighter.styleElement && window.TableHighlighter.styleElement.parentNode) { | |
| window.TableHighlighter.styleElement.parentNode.removeChild(window.TableHighlighter.styleElement); | |
| } | |
| window.TableHighlighter.createdElements.forEach(element => { | |
| if (element.parentNode) { | |
| element.parentNode.removeChild(element); | |
| } | |
| }); | |
| document.removeEventListener('keydown', handleEscapeKey); | |
| window.TableHighlighter.isRunning = false; | |
| } | |
| highlightTables(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment