☰

HighlightSelected

Highlight selected text on doubleclick

  1. // ==UserScript==
  2. // @name        HighlightSelected
  3. // @namespace	novhna
  4. // @description	Highlight selected text on doubleclick
  5. // @include     *
  6. // @version     0.0.2
  7. // @grant       GM_getValue
  8. // @grant       GM_setValue
  9. // ==/UserScript==
  10.  
  11. const highlighter = text => `<span 
  12.     class="tmp-highlighted"
  13.     style="background-color: yellow;"
  14. >${text}</span>`
  15.     
  16. const replacer = selected => text => text === selected 
  17.                                       ? highlighter(text) 
  18.                                       : text 
  19.   
  20. const cleaner = () => document
  21.     .querySelectorAll('span.tmp-highlighted')
  22.     .forEach(tag => tag.outerText = tag.innerText)
  23.  
  24. document.body.addEventListener('dblclick', () => {
  25.     cleaner()
  26.     
  27. 	const selected = document.getSelection().toString().trim()
  28.     if (!selected) return false
  29.     
  30. 	const page = document.body.innerHTML
  31. 	const re = RegExp(`<.+?>|\\b(${selected})\\b`, 'g')
  32. 	console.log(`[${selected}]`, re)
  33.  
  34.     
  35. 	const newPage = page.replace(re, replacer(selected))
  36. 	document.body.innerHTML = newPage
  37. })