[英]HTML string replace tags using jQuery
I have HTML string which contains various elements. 我有包含各种元素的HTML字符串。 Consider following is the HTML string -
考虑以下是HTML字符串-
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. 我的要求是在每个
img
标签之前和之后获取标签。 If tag before img
tag is p
tag, then replace it with <figure>
and closing </p>
with </figure>
. 如果
img
标签之前的标签是p
标签,则将其替换为<figure>
并用</figure>
结束</p>
</figure>
。
I tried looping through img
tag and able to get image details perfectly. 我尝试遍历
img
标签,并且能够完美地获取图像细节。
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>';
Use replaceWith
( comments inline ) 使用
replaceWith
( 内联注释 )
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>
use replace
and regular expression
: 使用
replace
和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);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.