Javascript Replace Node Example

Javascript Replace Node Example

by Adi Jaya

HTML

<h1>Example 1</h1>
<i rel="pre">this pre code</i>
<i rel="code">this code</i>
<i rel="h1">Heading 1</i>
<i rel="h2">Heading 2</i>
<i rel="h3">Heading 3</i>
<i rel="h4">Heading 4</i>
<i rel="blockquote">This <b>Blockquote</b></i>

<i rel="link=//example.com">Link <b>example.com</b></i>

<hr>

<i rel="ulalaaaa">
This is not replaced, 
see the console browser section
</i>

CSS

html {
  font-family: sans-serif;
  font-size: 15px;
  line-height: 1.4;
}

code {
    display: inline-block;
    color: #E91E63;
    padding: 0.25em 0.5em;
    background: #eae6e6;
    border-radius: 0.25em;
    zoom: 1;
}

pre {
    padding: 1em;
    background-color: #ffffff;
    overflow: auto;
    border: 0.063em solid silver;
    border-radius: 0.25em;
}

pre code {
    color: inherit;
    background: none;
    padding: 0;
    border-radius: 0;
    display: block;
    overflow: auto;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 500;
}

.blockquote {
    padding: 1em;
    margin-left: 0;
    border-left: 3px solid red;
    background: #fffdea;
}

JavaScript

/*
ini cocok untuk di digunakan pada komentar pengguna blogger.
dari pd melakukan DOM dikeseluruhan Element komentar
cara ini lebih ringan
*/

function replaceNode( tagName="i", attribute="rel") {
	var create, parent;
	var el = document.getElementsByTagName( tagName );
		el = Array.prototype.slice.call( el );
        
	for ( var i = 0; i < el.length; i++ ) {
		var attr = el[i].getAttribute( attribute );
        
		if( attr ) {
                
        	if( attr.indexOf( "link=" ) > -1 ){
            	var url = attr.replace( "link=", "" );
            	create = document.createElement( "a" );
                create.innerHTML = el[i].innerHTML;
                create.href = url;
                create.target = "_blank";
				parent = el[i].parentNode;
				parent.replaceChild( create, el[i] );
            }
            
    	  	else if( attr == "code" ){
				create = document.createElement( "code" );
				create.className = "code notranslate";
				create.innerHTML = el[i].innerHTML;
				parent = el[i].parentNode;
				parent.replaceChild( create, el[i] );
    	    }
    	    else if( attr == "pre" ){
				create = document.createElement( "pre" );
				create.className = "code-pre notranslate";
				create.innerHTML = "<code>"+ el[i].innerHTML +"</code>";
				parent = el[i].parentNode;
				parent.replaceChild( create, el[i] );      
    	    }
            
    	    else if( attr == "h1" || attr == "h2" || attr == "h3" || attr == "h4" ){
				create = document.createElement( attr );
				create.className = "heading-"+ attr;
				create.innerHTML = el[i].innerHTML;
				parent = el[i].parentNode;
				parent.replaceChild( create, el[i] );      
    	    }
            
    	    else if( attr == "blockquote" ){
				create = document.createElement( "blockquote" );
				create.className = "blockquote";
				create.innerHTML = el[i].innerHTML;
				parent = el[i].parentNode;
				parent.replaceChild( create, el[i] );      
    	    }
            
    	    else {
    	    	console.log(...