CODEWITHSUNDEEP
javascriptphp
user1592129
user1592129

Reputation: 493

Replacing tags in html string

I have a config file where I can set replaceTag property like

replacetags = "h1=p|strong,h2=p|strong

means in html string all the occurences of h1 will be replaced with 

<p><strong>...</strong></p>

and same will be done for h2

I am doing something like

tagpairs = replacetags.split(",") 
for( var i = 0; i < tagpairs.length; i++ ) {
  var pair = tagpairs[i].split("=");
  var searchtag = pair [0];
  var replacetags = pair [1];
  var opensearchstr = "<" + inputTag + ">" />
  var closesearchstr = "</" + inputTag + ">" />
  var openreplacestr = "";
  var closereplacestr = "";
  for( var j = 0; j < replacetags.length; j++) {
    openreplacestr += "<" + replacetags[ idx ] + ">" />
    closereplacestr +=  "</" + replacetags[ len -idx - 1 ] + ">" />
  }
}

something like this. Definitely there should be better ways to to so.

Upvotes: 2

Views: 101

Answers (2)

Saqib Ahmed
Saqib Ahmed

Reputation: 1269

Use JQuery will easily replace by using replaceWith() function. try this:

<h1>hello</h1>
<h2>world</h2>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
replacetags = "h1=p|strong,h2=p|strong";
tagpairs = replacetags.split(",");
for( var i = 0; i < tagpairs.length; i++ ) {
  var pair = tagpairs[i].split("=");
  var searchtag = pair [0];
  var replacetags = pair [1].split("|");
  var opensearchstr = "";
  var closesearchstr = "";

  for(var j=0; j<replacetags.length; j++){
    opensearchstr += "<" + replacetags[j] + ">";
    closesearchstr = "</" + replacetags[j] + ">"+closesearchstr;
  }
  $(searchtag).replaceWith(opensearchstr+$(searchtag).html()+closesearchstr);
}
</script>

Upvotes: 0

gurvinder372
gurvinder372

Reputation: 68393

Your logic has some limitations

  • Will not work if there are more than 2 levels to generated.
  • It is not replacing the tag

You need to use replaceChild 

function createElements( ele, val )
{
   var element = document.createElement("div");
   val.split("|").reduce( function(a,c,i,arr){
      var tmpChild = document.createElement(c);
      a.appendChild( tmpChild ); 
      if ( i == arr.length - 1 )
      {
         tmpChild.innerText = ele.innerText;
      }
      return tmpChild;
   } , element);
   ele.parentNode.replaceChild( element.firstChild, ele );
}

Demo

replaceTags( "h1=p|strong,h2=p|strong" );
function replaceTags( tags )
{
   //convert to map
   var map = tags.split( "," ).reduce( (a,c) => ( d = c.split("="), a[d[0]] = d[1], a ), {});
   
    
   Object.keys( map ).forEach( function( tagName ){
      Array.from( document.querySelectorAll( tagName ) ).forEach( function( ele ){
          createElements(ele, map[ tagName ] );
      })
   });
}

function createElements( ele, val )
{
   var element = document.createElement("div");
   val.split("|").reduce( function(a,c,i,arr){
      var tmpChild = document.createElement(c);
      a.appendChild( tmpChild ); 
      if ( i == arr.length - 1 )
      {
         tmpChild.innerText = ele.innerText;
      }
      return tmpChild;
   } , element);
   ele.parentNode.replaceChild( element.firstChild, ele );
}
<h1>H1 tag</h1>

<h2>H2 tag</h2>

Note

Upvotes: 2

Related Questions