HTML string replace tags using jQuery

Question

I have HTML string which contains various elements. Consider following is the HTML string -

var contentHTML = '<p>Some random string</p><p><img src="xyz.jpg" style="width: 100%;"><span some style></span></p><p><span style="font-size: 16.8px;"><b>Ingredients</b></span></p><p>Again some string</p><p><img src="xyz.jpg" style="width: 100%;"></p>';

My requirement is to get tag before and after each img tag. If tag before img tag is p tag, then replace it with <figure> and closing  with </figure>.

I tried looping through img tag and able to get image details perfectly.

How can replace elements before and after image.

$(this.content).find('img').each(function() {
    console.log($(this).prev());
    console.log($(this).attr('src'));
});

String I require -

var contentHTML = '<p>Some random string</p><figure><img src="xyz.jpg" style="width: 100%;"><span some style></span></figure><p><span style="font-size: 16.8px;"><b>Ingredients</b></span></p><p>Again some string</p><figure><img src="xyz.jpg" style="width: 100%;"></figure>';

I think the  and  are meant that surround the <img>, although I agree that the wording is a but ambiguous. Also I wonder what happened to the  that directly follows the <img> in the example. — Peter B
– Peter B, Commented Feb 16, 2018 at 11:50

gurvinder372 · Accepted Answer · 2018-02-16 11:43:05Z

Use replaceWith (comments inline)

var $contentHTML = $( "<div>" + contentHTML + "</div>");

$contentHTML.find( "img" ).each( function(){ //iterate all img elements
  var $parentP = $(this).parent(); //get the parent element
  if ( $parentP[0].nodeName == "P" ) //check if the parent Element is P
  {
     var innerHTML = $parentP.html(); //save the innerHTML value
     $parentP.replaceWith( "<figure>" + innerHTML + "</figure>" ); //replace with figure and retain saved html value
  }
});
console.log($contentHTML.html());

Demo

var contentHTML = `<p>Some random string</p><p><img src="xyz.jpg" style="width: 100%;"><span some style></span></p><p><span style="font-size: 16.8px;"><b>Ingredients</b></span></p><p>Again some string</p><p><img src="xyz.jpg" style="width: 100%;"></p>`;

var $contentHTML = $( "<div>" + contentHTML + "</div>");

$contentHTML.find( "img" ).each( function(){
  var $parentP = $(this).parent();
  if ( $parentP[0].nodeName == "P" )
  {
     var innerHTML = $parentP.html();
     $parentP.replaceWith( "<figure>" + innerHTML + "</figure>" );
  }
});
console.log($contentHTML.html());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

xianshenglu · Accepted Answer · 2018-02-16 11:59:00Z

0

use replace and regular expression:

var contentHTML = '<p>Some random string</p><p><img src="xyz.jpg" style="width: 100%;"><span some style></span></p><p><span style="font-size: 16.8px;"><b>Ingredients</b></span></p><p>Again some string</p><p><img src="xyz.jpg" style="width: 100%;"></p>';
var result=contentHTML.replace(/<p([^>]*?)>\s*?<img([\s\S]*?)<\/p>/g,'<figure$1><img$2</figure>');
console.log(result);

edited Feb 16, 2018 at 11:59

answered Feb 16, 2018 at 11:53

xianshenglu

5,4483 gold badges21 silver badges39 bronze badges

Collectives™ on Stack Overflow

HTML string replace tags using jQuery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related