JS Imitate selecting part of webpage then copy to clipboard

Question

I am trying to port over an old application into a new solution, however the js code has been changed so I cannot understand it.

I would like to get a parent HTML element "output" and select all child elements as if the user has highlighted.

From there, I would then like to copy this selection to the clipboard.

I can't seem to find any solution online for the first part and I fear solving the first part would still raise issues for the second part.

Any assistance on how to achieve this would be appreciated.

EDIT: The html is being populated with data, I have included a fake version due to being unable to share the actual design.

<div id="output">
    <h1>My Name</h1>
    <img src="" />
</div>

I would like to highlight the rendered HTML (not the outer HTML) and copy to clipboard.

It will look similar to following after copying:

My Name

And should not be:

<div id="output"><h1>My Name</h1><img src="" /></div>

I have looked at js range, this may be a solution but I cannot identify how to select all of a parent "output"

Answer 1

Using Jason's answer, you can simply add document.execCommand("copy"); after creating the selection and the text will be copied.

If you then paste into a document that allows formatting to be preserved, e.g. a Microsoft Word document, then it will look as it did on the web page.

function selectText(node) {
    node = document.getElementById(node);

    if (document.body.createTextRange) {
        const range = document.body.createTextRange();
        range.moveToElementText(node);
        range.select();
    } else if (window.getSelection) {
        const selection = window.getSelection();
        const range = document.createRange();
        range.selectNodeContents(node);
        selection.removeAllRanges();
        selection.addRange(range);
    } else {
        console.warn("Could not select text in node: Unsupported browser.");
    }
}

const clickable = document.querySelector('.click-me');
clickable.addEventListener('click', () => { selectText('output'); document.execCommand("copy");});

<div id="output">
   <h1>My Name</h1>
   <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAH4AAAB+CAYAAADiI6WIAAAPeUlEQVR4nO3cX2xU14HH8a8awJ3SWASCN3+arJ0/gIsLLKgkhq6dKQk2sZt6s3FGXq3TJMTZFrtpjB2STXBwso0rL1XcbmWaOm6KeEGyJZ54sMQDDyAZmRcQtuABJNBY5o+EeLCxMGj47cO5M/fOzB1jk8Ad20fRV7o+UsSd+cw599yLGQDZ5mSBn4DNwmd3uaCtoG5QH6jfOW7MgnOz8N9BJaB20D7QAee4ycGOZqgPVJwF527h79BKUCtoN2gPaIcz1o6Zyd4GQeOg66DhSfCjMws/8BO4Z4VAVaBmUAuoBrQYVAHaC+pN6QzodAr6AOgaaMJpDDQKugm65fx80QM/lAWve07A54DCoFpQnXMcR28DdaTUBdrvg34UdNXphAf+nAd9AiSfYin4M+SaH/gJTKlFoDIHNs8zXoy5/noLY2Z3KnoH6AjomA/8GQ/8BQ/8ZQ96LAO8MDM/Dt+dBe/XjIMvBBX5jIdBEadKz3idD3wDZmn3gz+JWc5T4Yc98Fc88KMe+NuTwMeYcct94CeQ1BoHP3W80gNfZuFnH3ym8hz8MKjAMx72gb/TUn/cB37QAx/1wI8wtaV+3APfkwXv16yBn6w4fgOoHLPhC2WA7wId9IE/7IE/5YE/z9Q2d5ewm7usKYSZ+W1O9ZjbuWof+F7QWafU2znvcj+GuZ+POd0geUffj3nCF/Rrn9Pwk5WPeYDTi7mnbwWVgjrxf4Az4XwARpj8AU7ZFP/8LCjwE8i6Is4H4JBTJ+ZSMjAJ+NDMQrfw060Rs3kbcupxxmbI8m7hbcGfgM3C2yy8zcLPhHJz0Na1qPsV1FeL+t8xx43FwZ+bhf8OKvln1P4S2vdv6EDEHDcVG+zodv/6alHxj4I/dwt/h1YuRa0voN2b0Z4KtGOjGWt/ycxkb4Pb0Pgn6PonaLgpM350e9bhB34CgRSah6pWoOYNqKUU1fwELQ6himVobxXqfT25M79FpxuS0Qfq0LWP0ESLaewTNPoxutmCbn1qfr7Y7MIP1Qf/uucEfM48FM5HtatR3TpzHEdv24Q6ypPr+gXa/+/p6EffRlc/NJ34jQt/7ncu+kQLUmt6sV3J+Fl0zQ/8BL51i76Pyp5G4QKUt9AdL34CNW1ILpxvZncqekc5OvI2OlbnP9vj8BcaXfjLH7josV3+8Go1Mz8O3/1K8O/XjIMvfBgV5aWPhwtQpMhUucwdr1uXDt+w3iztfvAnf2OW81T44e0u/JUdLvzoxy787Qzo8Vmfhct94Ccw5dY8YvBTxyuXufBlT1v4WQefqbyFBj9cgAoWuePh/Okv9cffTYcf3ObCR7e78CNNU1vqx3e68D3Vwb9fswZ+suL4DetR+TNmwxea5w/f9Qt08D/S4Q+/6cKf2ubCn39/apu7Sx/YzV3WFJpnZn7bJlP9enM7V70yHb73dXT2d6bU2znvcj/m3M/Hdplu7Eze0fe/Y57wBf3a5zT8ZOUvMg9wel839/StL6DSfNRZ4f8AZ6LFfABG7vAAp+yZ4F+bhb/LIkXmA3DoDVNnhbmUDNRlBh+qzzp0C/9d1lhsNm9D9aaeajOWRcu7hbcFfwI2C2+z8DYLP9fLzUVbt6LubtTXh/r7zXFjo4WfFZWUoPZ2tG8fOnDAHDc1Gexo1L++PlR8d08Dg3/Bc6mVK1FrK9q9G+3Zg3bsMGPt7WYmexscROPj6Pp1NDycGT8avSv84N+M2VYohKqqUHMzamlBNTVo8WJUUYH27kW9vcmdOYNOn05GHxhA166hiQnT2BgaHUU3b6Jbt8zPFy+68ENDFv6+lJODwmFUW4vq6sxxHL2tDXV0JNfVhfbvT0c/ehRdvWo6ccKFP3fORZ+YQFJ6sVgy/jSv+cG/idncokWorMzA5nl+CaS42Fx/vYXDZnanond0oCNH0LFj/rM9Dn/hggt/+bKLHov5w0tm5sfhu7st/LQrLERFRenj4TCKREyVle54XV06fEODWdr94E+eNMt5KvzwsAt/5YoLPzrqwt++nRk+Frvr5T74Nz0bWrPG4KeOV1a68GVlFn7OlJdn8MNhVFDgjofD01/qjx9Phx8cdOGjURd+ZGRqS/34uAvf02Ph70tx/IYGVF5uNnyhkD98Vxc6eDAd/vBhF/7UKRf+/Pmpbe4uXbKbu6wpFDIzv63NVF9vbueqq9Phe3vR2bOm1Ns573I/Nmbu52Mx040byTv6/n7zhM/CZ2n5+eYBTm+vuadvbUWlpaiz0/8BzsSE+QCMjEz+AMe7/7DwM6xIxHwADh0ydXaaS8nAQGbwoaG7QrfwM6XGRrN5Gxoy9fSYsWku7xbeFvwJ2Cy8zcLbLHxWl4vYiuhG9CH6neNv99sxFj5rKkG0I/YhDjjHTQ52NEN9iOz5t3IWPmMrEa2I3Yg9iB3OWDtmJnsbRIwjriOGJ8GPZi1+4CdwfwshqhDNiBZEDWIxogKxF9Gb0hnE6RT0AcQ1xITTGGIUcRNxy/n5ogd++r8dY+HvqhxEGFGLqHOO4+htiI6UuhD7fdCPIq46nfDAn/OgTyDf/2Ik42ffNT/wE7j7FiHKHFjvV6QUY66/3sKY2Z2K3oE4gjiG/2yPw1/Ahb+Mix5LI3f/G8OFn95vx1h4QBQifH47hjAi4uT57RjqSIdvwCztfvAnMct5KvwwLvwVXPhRXPjbPuDeWZ+9y33gJ3Dn1mDwU8crceG9f1Fh4WcJfKbyMPhhhOe3Ywgz/aX+OOnwg7jwUVz4Eaa21I/jwk/vt2Ms/F0Xx29AlGM2fCH84bsQB0mHP4wLfwoX/jxT29xdwm7usqYQZua3OdVjbueqSYfvRZx1Sr2d8y73Y5j7+ZjTDZJ39P2YJ3xBv/Y5DT9Z+ZgHOL2Ye/pWRCmiE/8HOBPOB2CEyR/g3N0vSlj4rCjifAAOOXViLiUDk4APZS26hf9OasRs3oacepyx7FveLbwt+BOwWXibhbdZeNudyhVsFXQL+gT9znGjhZ8dlQjaBfsEB5zjJgc7mqE+QbGFz/5WCloFuwV7BDucsXaZmextUDAuuC4YngQ/6ocf9Audi4UEVYJmQYugRrBYUCHYK+hN6YzgdAr6gOCaYMJpTDAquCm45fx80QM/ZOHvTzmCsKBWUOccx9HbBB0pdQn2+6AfFVx1OuGBP+dBnxDIp1gKftI1P+g3aKa3SFDmwOZ5xotlrr/ewjKzOxW9Q3BEcMwH/owH/oIH/rIHPZYBXjIzPw7fbeGnX6GgyGc8LIg4VXrG63zgG2SWdj/4kzLLeSr8sAf+igd+1AN/exL4mDIs90G/oTOlNQ5+6nilB77Mws+d8hz8sKDAMx72gb/TUn/cB37QAx/1wI9oakv9uAe+x8Lfn+L4DYJymQ1fKAN8l+CgD/xhD/wpD/x5TW1zd0l2c5c1hWRmfptTvcztXLUPfK/grFPq7Zx3uR+TuZ+POd1Q8o6+X+YJn4XP0vJlHuD0ytzTtwpKBZ3yf4Az4XwARjT5A5yy1D8r6Bdqm3oR5wNwyKlT5lIyMAn4kB+6hZ89Ncps3oacepyx3Ez/T9AnbAuowE/AZuFtFt5m4Wdy88jRE6zTKqq0nje0gTqtokoFbAj63IJ/c2ZDi8nXCjZrDa9qHTVawWY9xUat5w1totm39byhh3jCwmd7D5KnZYRVSJmKqNTT/EwPkqcVbNZG6pIqoUHltKicFm3ig4z4m2gOCj/4NzSbeoD5eoRCPcVGPcsLeoxVmk9IeSzTal7VWiJJlfKeXuC9FPj/0mY+1hZ2aQu7VE6LytipLezSy7SqnBa96PkwlNJg4e9H32OellCgx1mjJ1mnJc7fqj3AfC3nRf2YLUmt4pf6F6rT0DfwjjbzkTbzkUrYloAP05hA38IuVfB5Wi/zWRJ+ANf84CHuVfP5vpbyjJZQoAUsTIw/xBN6io1JLaFAj7EqDf3HbFExW7WRd31nexz+52xPwL/Ehwn0l/nMF76Cz53LgIFfRZWFn24/ZKke5J/Sxg1mkR6jSHksT4w/ybo0+Hye07O84Av/r2xTKe+lwW+iOQH/Eh8m4OPLeqbZ7p31AS73wcN923J5RD9kadp4HssT8Et5xsLPNvhMLWCh8liuJRToBzyUGF9CwbSX+p/x6zT4EhoS8JtoTsC/yAfTXurXErHw96M4fj7PaSnP6nvM0wPM94VfxS/1U/4zDf553vZs7uoT8D9n+xQ3dzvs5i5beoD5eoxVWs6LWs6Lyuc5zSekRylKg19LRGHeV5j3027nvMt9/H7+ZT7Ty3ymLXyatKPfQJ3mkWPhs7UQi7SMsNYS0Wpe1TLCWkK+iqj0fYBj0HcmIfvl3X9Y+BnWYxSpiEo9x6/0HL9SEZV6io3ayLsZwUtpCArdwt+PCtjg3Pc3qJQGrSWiAjYEsbxbeFvwJ2Cz8DYLb7Pws7kQuSphq96iW030aSf9eotulU3+/TUWfqa0nBJV06469um3HFA17SqjSU306UuivjXRp6f9v7/GwmdTj7NSVbQqwm7Vskdb2KHHWalq2rWT/qR+z6D+xrj+xnV1MJwR/0ui9wo/+DdsJrWAkNZSpXKa9Qotep4aLWSxVlOhd9irenqT+gNn1MbpJPRPGVAn1/Q1E/qaCX3FmP7KqLq5qb9zS18xpj9xMQH/Rfr311j4e9E8crSCsDZQq1LqtML5/poFhPQabaqhI6k36dKv2Z+G/jFH9Reu6i9c1eecSMD/L+cS6F8zoX+gtL4hloR/D675wb/RQfUDFqmIMhUSVq7n+2ueoVjlNCW1grCepyYNvYYO/TdH1MIx39keh/8jFxLwf+ZyAv3vxHzh/4H0FWMJ+LeSv7/Gwk+lRynUj3y+v6aQsNYT0XoiWu35/ppS6tLgN9GgV2jxhf+ck2rjdBp8B8MJ+P/jSgL+r4x6ZvvtjPDfELuXy33wMPe6J1mjR32+v2Y1lQn4Is8/Jbbws7xc8rSaShUS1sOe769ZQXjaS/0ujqfB/57BBPyXRBPwHYxMaanvYjwBvy35+2ss/L0qjr+JBv2Ecs0jRwsI+cK/SZfe52Aa/IccTsD/D6cS8H/k/JQ2d3/mkt3cZUsLCOl5avQabXqNNm2iXgtZrJ9SnQZfT6/aOat2zqbdznmX+68Y01dc1zfE9A0xfc2NpB39TvoVyvwFBxY+6B4mX1W0qp5evcNeVdGqFZSqlk7fBzgGfVR/YmTSBzhF/l9lYuFnQuuJqJZONXNIzRxSLZ0qp0mfMpAR/AuG7hW6hc+GymjUNnr0BUP6giFto0dlNN6L5d3C24I/AVsA/T/YKVnTEw1NgQAAAABJRU5ErkJggg==" />
</div>
<p class="click-me">Click me!</p>