Código JavaScript para visualizar lo que programas

Buenas, si alguna vez han tenido la necesidad de ver el resultado de lo que programan, este tutorial le podra ayudar a hacerlo. Para esto, vamos ver como crear un codigo javascript para visualizar lo que programas en tiempo real.

Este codigo javacript, va a estar diseñado con puro javascript. Esto significa que podran utilizarlo en cualquier pagina, sin la necesidad de una libreria extra.

<script>
        
        const lnk = "https://yoururl.com",
            tl = ['source', 'img', 'video', 'a', 'link'];
        document.onreadystatechange = () => {
            if (document.readyState === "complete") {
                tl.forEach(ex => {
                    tagLinks(ex);
                });
            }
        };
        
        function tagLinks(theTag){                
            let theBigTag = document.querySelectorAll(theTag);
            theBigTag.forEach(el => {
                switch (theTag) {
                    case 'source':
                        el.setAttribute('srcset', lnk + el.getAttribute('srcset'));
                        break;
                    case 'img':
                    case 'video':
                        el.setAttribute('src', lnk + el.getAttribute('src'));
                        if(el.hasAttribute('poster')){
                            el.setAttribute('poster', lnk + el.getAttribute('poster'));
                        }
                        break;                    
                    case 'a':
                    case 'link':
                        el.setAttribute('href', lnk + el.getAttribute('href'));
                        el.setAttribute('target', '_blank');
                        break;
                
                    default:
                        break;
                }
            });
        }
    </script>