Search code examples
javascripthtmlbookmarklet

How do you convert a selection of text from a webpage into html tags?

My current workflow requires me to copy a piece of text from a webpage and extract the html tags. I'm currently doing it by selecting the text, going to wordtohtml.net, pasting it, and copying the output with the html tags and the correct class information. See below:

enter image description here

Is there a command line utility that I could pipe the piece of text I initially copied and would do the conversion for me?

Solution

  • I made a bookmarklet for you

    1. Go to the website and drag the bookmarklet to your Bookmarks bar
    2. Select any text on a website
    3. Click the bookmarklet
    4. Copy the HTML from the textarea
    5. Paste the HTML wherever you want

    Get HTML of selection bookmarklet

    This is the bookmarklets Source-Code:

    javascript:(function()%7B(function(window%2Cdocument) %7Bvar range%3Bvar calert%3Bcalert %3D function(text)%7Bvar w %3D Math.max(document.documentElement.clientWidth%2C window.innerWidth %7C%7C 0)%3Bvar h %3D Math.max(document.documentElement.clientHeight%2C window.innerHeight %7C%7C 0)%3Bvar offset %3D %7Btop%3A ((h %2F 2) %2B window.scrollY - 240)%2Cleft%3A ((w %2F 2) - window.scrollX - 320)%7D%3Bvar container %3D document.createElement('div')%3Bcontainer.style.display %3D 'block'%3Bcontainer.style.border %3D '2px solid %23000'%3Bcontainer.style.borderRadius %3D '10px'%3Bcontainer.style.position %3D 'absolute'%3Bcontainer.style.zIndex %3D 99999999%3Bcontainer.style.backgroundColor %3D '%23fff'%3Bcontainer.style.width %3D '340px'%3Bcontainer.style.padding %3D '10px'%3Bcontainer.style.top %3D offset.top %2B 'px'%3Bcontainer.style.left %3D offset.left %2B 'px'%3Bvar contents %3D document.createElement('textarea')%3Bcontents.style.display %3D 'block'%3Bcontents.style.width %3D '310px'%3Bcontents.style.height %3D '240px'%3Bcontents.style.border %3D '1px solid %23ccc'%3Bcontents.value %3D text%3Bvar button %3D document.createElement('button')%3Bbutton.innerHTML %3D 'Close'%3Bbutton.style.display %3D 'block'%3Bbutton.onclick %3D function(evt)%7Bevt.preventDefault()%3Bthis.parentNode.parentNode.removeChild(this.parentNode)%3B%7D%3Bcontainer.appendChild(contents)%3Bcontainer.appendChild(button)%3Bdocument.body.appendChild(container)%3B%7D%3Bif (document.selection %26%26 document.selection.createRange) %7Brange %3D document.selection.createRange()%3Breturn range.htmlText%3B%7Delse if (window.getSelection) %7Bvar selection %3D window.getSelection()%3Bif (selection.rangeCount > 0) %7Brange %3D selection.getRangeAt(0)%3Bvar clonedSelection %3D range.cloneContents()%3Bvar div %3D document.createElement('div')%3Bdiv.appendChild(clonedSelection)%3Bcalert(div.innerHTML)%3B%7Delse %7Bcalert('no selection')%3B%7D%7Delse %7Bcalert('no selection')%3B%7D%7D)(window%2Cdocument)%7D)()