I am trying to create a JS regex that matches a a string inside a given piece of code by it's beggining and ending and then only adds one character to that matched string.
Please see below what I mean:
Imagine that I supply the following code:
<div>
<p>This is just some random text</p>
<a href="https://somerandomsrc.com">
<img src="https://somerandomsrc.com" alt="random image">
</a>
<img src="https://someotherrandomsrc.com" alt="another random image">
</div>
What I need to do is to have the script finding all instances of <img> and add a closing slash to the <img> elements so I would have something like this:
<div>
<p>This is just some random text</p>
<a href="https://somerandomsrc.com">
<img src="https://somerandomsrc.com" alt="random image" />
</a>
<img src="https://someotherrandomsrc.com" alt="another random image" />
</div>
Any help will be appreciated.
Regards,
T
Usually regex should be avoided for dealing with html/xml, but since your img tag seems broken and img tags are not nested, you can use following regex,
(<img[^>]*)>
and replace it with
$1 />
and fix your broken img tags.
Demo
const s = `<div>
<p>This is just some random text</p>
<a href="https://somerandomsrc.com">
<img src="https://somerandomsrc.com" alt="random image">
</a>
<img src="https://someotherrandomsrc.com" alt="another random image">
<img src="https://someotherrandomsrc.com" alt="another random image" />
</div>`
console.log('Before: ' + s);
console.log('After: ' + s.replace(/(<img[^>]*[^/])>/g,'$1 />'));
Edit1:
Yes just change the regex to (<img[^>]*[^/])> so that it won't match the one which already has a proper closing tag />.
Updated Demo
Just select the img and its content in a group (<img\s.*?) except the closing tag and use replace with a global flag to replace after it with / slash.
const string = `<div>
<p>This is just some random text</p>
<a href="https://somerandomsrc.com">
<img src="https://somerandomsrc.com" alt="random image">
</a>
<img src="https://someotherrandomsrc.com" alt="another random image">
</div>`
const result = string.replace(/(<img\s.*?)>/g, '$1 />')
console.log(result)
Related
I'm a trainee and actually I'm working on a web shop.
Now I got the problem that I have multiple images placeholders (image_1-6) for our article images. Problem now is, if the article only has 2 images the placeholders for the other 4 are still there. So is there any possibility to hide them if the src is empty or a parameter defined by me?
Here is the code snippet:
<div class="sideimg grid_2">
<div id="image_1" class="lb_thumb">
<a href="javascript:;" onmouseover="swapImage('Bild1','','http://media-11teamsports.de/ArticleBig/[ArtikelOnlinebezeichnungD.Bild1]',1)" onmouseout="swapImgRestore()">
<img class="lb_detailimg" src="http://media-11teamsports.de/ArticleSmall/[ArtikelOnlinebezeichnungD.Bild1]"id=image1 name="Bild1" alt="Bild1" id="Bild2" />
</a>
</div>
<div id="image_2" class="lb_thumb">
<a href="javascript:;" onmouseover="swapImage('Bild1','','http://media-11teamsports.de/ArticleBig/[ArtikelOnlinebezeichnungD.Bild2]',1)" onmouseout="swapImgRestore()">
<img class="lb_detailimg" src="http://media-11teamsports.de/ArticleSmall/[ArtikelOnlinebezeichnungD.Bild2]" id=image2 name="Bild2" alt="Bild2" id="Bild2" />
</a>
</div>
<div id="image_3" class="lb_thumb">
<a href="javascript:;" onmouseover="swapImage('Bild1','','http://media-11teamsports.de/ArticleBig/[ArtikelOnlinebezeichnungD.Bild3]',1)" onmouseout="swapImgRestore()">
<img class="lb_detailimg" src="http://media-11teamsports.de/ArticleSmall/[ArtikelOnlinebezeichnungD.Bild3]" id=image3 name="Bild3" alt="Bild3" id="Bild2" />
</a>
</div>
<div id="image_4" class="lb_thumb">
<a href="javascript:;" onmouseover="swapImage('Bild1','','http://media-11teamsports.de/ArticleBig/[ArtikelOnlinebezeichnungD.Bild4]',1)" onmouseout="swapImgRestore()">
<img class="lb_detailimg" src="http://media-11teamsports.de/ArticleSmall/[ArtikelOnlinebezeichnungD.Bild4]" id=image4 name="Bild4" alt="Bild4" id="Bild2" />
</a>
</div>
<div id="image_5" class="lb_thumb">
<a href="javascript:;" onmouseover="swapImage('Bild1','','http://media-11teamsports.de/ArticleBig/[ArtikelOnlinebezeichnungD.Bild5]',1)" onmouseout="swapImgRestore()">
<img class="lb_detailimg" src="http://media-11teamsports.de/ArticleSmall/[ArtikelOnlinebezeichnungD.Bild5]" id=image5 name="Bild5" alt="Bild5" id="Bild2" />
</a>
</div>
<div id="image_6" class="lb_thumb">
<a href="javascript:;" onmouseover="swapImage('Bild1','','http://media-11teamsports.de/ArticleBig/[ArtikelOnlinebezeichnungD.Bild6]',1)" onmouseout="swapImgRestore()">
<img class="lb_detailimg" src="http://media-11teamsports.de/ArticleSmall/[ArtikelOnlinebezeichnungD.Bild6]" id=image6 name="Bild6" alt="Bild6" id="Bild2" />
</a>
</div>
</div>
Here is the live version(wip): http://www.ebay.de/itm/Jako-Tape-10-Meter-2-5-cm-breit-Rot-F01-/272269970423?
All I know about html css and js I learned by myself so I hope the snippet is fine.
So as you can see I have 6 images with js image swap. The only left problem is that our database don't contains an image for every placeholder, so if there are only 4 pictures there are still 2 empty boxes. So how can i get rid of them?
Thanks all for your help and excuse my english I'm from Germany.
You can try using the CSS selector for html attributes like this:
.lb_detailimg[src]{
(Whatever css u need goes here)
display: block;
}
.lb_detailimg{
display: none;
}
If any <img> of class lb_detailimg does not have a src attribute it will not be displayed.
You could also use a keyword in the src attribute to make this happen, like this:
.lb_detailimg{
(Whatever css u need goes here)
}
.lb_detailimg[src=keyword]{
display: none;
}
EDIT:
As you cannot give style to a parent element in CSS here is a JS snippet that should work fine:
window.onload = function(){
var img_containers = document.getElementsByClassName("lb_thumb");
for(var i=0; i<img_containers.length;i++){
if(img_containers[i].getElementsByTagName("img")[0].src.indexOf("keyword") > -1){
img_containers[i].style.display = "none";
}
}
}
At line 4 in the if ==> .indexOf("yourKeyWordHere")
i need to add a ng-click attribute to a IMG tag present in a string, using String.replace.
Example:
<p>Test1</p>
<p>
<img class="fr-dib fr-draggable" src="http://admin.fsn.dev/uploads/a4cafaf13aabb97b041a50ae55c7bb6d331a7cc4.jpg">
Foto1
</p>
<p>
<img class="fr-dib fr-draggable" src="http://admin.fsn.dev/uploads/c5a7fc84d8f552d208e5ee0e0cbcecc0d547b441.jpg" style="width: 300px;">
</p>
Needs to be converted to:
<p>Test1</p>
<p>
<img class="fr-dib fr-draggable" src="http://admin.fsn.dev/uploads/a4cafaf13aabb97b041a50ae55c7bb6d331a7cc4.jpg" ng-click="openModal('http://admin.fsn.dev/uploads/a4cafaf13aabb97b041a50ae55c7bb6d331a7cc4.jpg')">
Foto1
</p>
<p>
<img class="fr-dib fr-draggable" src="http://admin.fsn.dev/uploads/c5a7fc84d8f552d208e5ee0e0cbcecc0d547b441.jpg" ng-click="openModal('http://admin.fsn.dev/uploads/c5a7fc84d8f552d208e5ee0e0cbcecc0d547b441.jpg')" style="width: 300px;">
</p>
Any suggestion?
I tried with this but no luck :(
data = data.replace(/<img(.*)src="(.*)"(.*)>/ig,'<img $1 src="$2" ng-click="openModal(\'$2\')" $3')
Is it possible to select all words, that are not tags and not inside tags as attributes? I have got this working inverse, and I know I could make this in two phases, replace first matches and make a new Javascript RegExp search. But thing is that I'd like to get it work with one expression.
http://regexr.com/3cb6g
(<[^>]*>)|({[^>]*})
Input:
<p>Test image captions for GitBook:</p>
<p>Second image: <img scr="./image2.png" alt="image title" title="image title">asdf</img>{caption width="300" style="height:'300px'"} </p>
<p>Sample text and first image: <img scr="./image1.png" alt="image 1" /> {caption width="300" style="height:'300px'"} for testing ok...</p>
Expected output marking words inside ` that should be matched:
<p>`Test` `image` `captions` `for` `GitBook`:</p>
<p>`Second` `image`: <img scr="./image2.png" alt="image title" title="image title">`asdf`</img>{caption width="300" style="height:'300px'"} </p>
<p>`Sample` `text` `and` `first` `image`: <img scr="./image1.png" alt="image 1" /> {caption width="300" style="height:'300px'"} `for` `testing` `ok`...</p>
My question might not have been too clear because answers were using javascript code to process matches. My purpose was to find solution with simple expression only. I finally found this expression that satisfies my needs:
((?!([^<]+)?>)([\w]+)(?!([^\{]+)?\})([\w]+))
http://regexr.com/3cb6j
You can try this:
var words = [];
$(function () {
$("p").each(function () {
words.concat($(this).text().split(" "));
});
});
Now words array contains all the words.
Try using .textContent , String.prototype.replace() with RegExp /\{.*\}|:|\.+|\s{2}|\s$/gi
var p = document.getElementsByTagName("p"), res = [];
for (var text = "", i = 0; i < p.length; i++) {
res[i] = p[i].textContent.replace(/\{.*\}|:|\.+|\s{2}|\s$/gi, "")
}
console.log(res)
<!--
<p>`Test` `image` `captions` `for` `GitBook`:</p>
<p>`Second` `image`: <img scr="./image2.png" alt="image title" title="image title">`asdf`</img>{caption width="300" style="height:'300px'"} </p>
<p>`Sample` `text` `and` `first` `image`: <img scr="./image1.png" alt="image 1" /> {caption width="300" style="height:'300px'"} `for` `testing` `ok`...</p>
-->
<p>Test image captions for GitBook:</p>
<p>Second image: <img scr="./image2.png" alt="image title" title="image title">asdf</img>{caption width="300" style="height:'300px'"} </p>
<p>Sample text and first image: <img scr="./image1.png" alt="image 1" /> {caption width="300" style="height:'300px'"} for testing ok...</p>
I am a total noob, so please go easy.
I am trying to replace one image with a second image while hovering on a different element. My problem is that only the first image is being replaced by the link images. I've give each image an ID, I just am not sure how to apply it.
Thank you in advance for any help you can provide!
Here is what I have so far:
Script:
<script>
function changeimage(towhat,url){
if (document.images){
document.images.targetimage.src=towhat.src
gotolink=url
}
}
function warp(){
window.location=gotolink
}
</script>
<script language="JavaScript1.1">
var myimages=new Array()
var gotolink="#"
function preloadimages(){
for (i=0;i<preloadimages.arguments.length;i++){
myimages[i]=new Image()
myimages[i].src=preloadimages.arguments[i]
}
}
preloadimages("http://www.dxmgp.com/group/images/color_si.jpg", "http://www.dxmgp.com/group/images/bw_si.jpg","http://www.dxmgp.com/group/images/color_dxm.jpg", "http://www.dxmgp.com/group/images/bw_dxm.jpg","http://www.dxmgp.com/group/images/color_tsg.jpg", "http://www.dxmgp.com/group/images/bw_tsg.jpg","http://www.dxmgp.com/group/images/color_image.jpg", "http://www.dxmgp.com/group/images/bw_image.jpg")
</script>
HTML:
<div id="wrap">
<div id="upper">
<div class="u-top">
<img src="http://www.dxmgp.com/group/images/bw_si.jpg" name="targetimage" id="si" border="0" />
<img class="picright" src="http://www.dxmgp.com/group/images/bw_dxm.jpg" name="targetimage" id="dxm" border="0" />
</div>
<div class="u-mid">
<img src="http://www.dxmgp.com/group/images/bw_owners.png" />
</div>
<div class="u-low">
<img class="picleft" src="http://www.dxmgp.com/group/images/bw_tsg.jpg" id="tsg" />
<img class="dxmlogo" src="http://www.dxmgp.com/group/images/logo_dxm.png" />
<img class="picright" src="http://www.dxmgp.com/group/images/bw_image.jpg" id="img" />
</div>
</div>
<div id="lower">
<div class="dots"><img src="http://www.dxmgp.com/group/images/topdots.png"></div>
<div class="logos">
<a href="http://www.thescoutguide.com">
<img class="picll" src="http://www.dxmgp.com/group/images/logo_tsg.png"></a>
<img class="picmid" src="http://www.dxmgp.com/group/images/logo_si.png">
<a href="http://www.imagebydxm.com">
<img class="piclr" src="http://www.dxmgp.com/group/images/logo_image.png"></a>
</div>
<div class="dots"><img src="http://www.dxmgp.com/group/images/lowdots.png"></div>
</div>
</div>
How about something like this? Consider you have a div containing image1.png. When you mouse over a hyperlink, you want to replace image1.png with image2.png. Then, when you move your mouse away from the hyperlink, image2.png will once again be replaced with image1.png:
This is your div containing the image:
<div id="image">
<img src="image1.png" />
</div>
This is the hyperlink:
Mouse over to change image
Here are the JavaScript functions that will replace the inner HTML of the div with different images:
<script type="text/javascript">
function mouseOver() {
document.getElementById("image").innerHTML = '<img src="image2.png" />';
}
function mouseOut() {
document.getElementById("image").innerHTML = '<img src="image1.png" />';
}
</script>
Let me know if this is what you are looking for.
I'm using this code for showing image inside any tag:
var imgs = $(this).find("p").attr("rel");
$('.hLeft img').attr("src", imgs);
Markup:
<div class="hLeft">
<h2></h2>
<a href="" class="mn">
</a>
<img src="" />
</div>
But when I insert <img> inside a, my script not working.
$('.mn img').attr("src", imgs);
Markup:
<div class="hLeft">
<h2></h2>
<a href="" class="mn">
<img src="" />
</a>
</div>
Why the $('.mn img').attr("src", imgs); not working with a tag?
the img is over written by this line:
$("a", $hleft).html(mansetText);
I think it deals with the css properties of class mn. div are displayed as block by default which is not the case for a. Try to add display:block; in the mn class to see the result.