i have a html text like that i get from database, but it have a hover that show the image name, so i want to remove the title
from this
<img title="AAAAAAA" src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg" alt="" width="212" height="212">
to this
<img title="" src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg" alt="" width="212" height="212">
i have tried
var text = '<img title="AAAAAAA" src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg" alt="" width="212" height="212">'
text.replace(/(<img .*title=")(.+)(")/, '$1$3')
but it also remove my src
"<img title="">"
any help guys ?
You could use JS function removeAttribute():
document.getElementById("someId").removeAttribute("title");
console.log(document.getElementById("someId"));
<img title="AAAAAAA" src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg" alt="" width="212" height="212" id="someId">
EDIT: How to remove with regex
var text = '<img title="AAAAAAA" src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg" alt="" width="212" height="212">';
console.log(text.replace(/ title=".[^"]*"/, ''))
How to remove only title´s value:
var text = '<img title="AAAAAAA" src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg" alt="" width="212" height="212">';
console.log(text.replace(/title=".[^"]*"/, 'title=""'))
If you are only getting the element as a string and not as a DOM element, then you can try using \"[\s\S]+(?= ) to select the portion of string that goes from the first " to the first space (returning you "AAAAAAA").
You can then replace the text as per your code in the question.
It can be very hard, if not impossible, to reliably parse HTML using the likes of regex, indexOf, etc. The whole issue can be totally avoided by using the built-in DOMParser object, as follows:
const html = '<img title="AAAAAAA" src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg" alt="" width="212" height="212">';
const parser = new DOMParser();
const doc = parser.parseFromString(html, "text/html");
const img = doc.body.children[0];
img.title = "";
console.log(img.outerHTML)
You could also use img.removeAttribute("title"); if you want to get totally rid of the title attribute.
Simpler and cleaner way.
var xmlString = '<img title="AAAAAAA" src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg" alt="" width="212" height="212">'
var x = new DOMParser().parseFromString(xmlString, "text/xml").documentElement
x.removeAttribute("title")
console.log(x)
Related
I need to find an automated way to update href URLs in a HTML file with the corresponding image alt text the anchor tag is wrapping while also including leading and closing RPL text.
Start:
<img src="/images/image.jpg" alt="ALT_TEXT">
End:
<img src="/images/image.jpg" alt="ALT_TEXT">
Breaking down the new URL:
First Variable: ${clickthrough('<br>
Second Variable: ALT_TEXT<br>
Third Variable: ')}
Anyone know where I should start in designing a solution for this problem? What coding language might handle this?
The language that you are looking for is JavaScript.
Here is a working example that does what you mentioned. (and here is a codepen with the same example)
const anchorElements = document.querySelectorAll('a');
[...anchorElements].forEach((anchor) => {
const altText = anchor.querySelector('img').alt;
anchor.href = "${clickthrough('" + altText + "')}";
})
<img src="https://place-hold.it/300x100" alt="text1">
<img src="https://place-hold.it/300x100" alt="text2">
<img src="https://place-hold.it/300x100" alt="text3">
I am trying to write a regex that looks for an img tag where there is no alt attribute.
Here is the regex.
<img\s+src.+^(?!alt).+$
Here are some samples
<img src="smiley.gif" alt="Smiley face" height="42" width="42">
<img src="smiley2.gif" height="42" width="42">
<img src="smiley3.gif" alt="Smiley face Three" height="42" width="42">
Here is a link to regex101
https://regex101.com/r/Z5vkQb/3/
Don't.
You haven't specified which language you're using, but chances are good you have a DOM parser available.
For example, in JavaScript, you can just do this:
var imgs_with_no_alt = document.querySelectorAll("img:not([alt])");
In PHP you would need something like this:
$dom = new DOMDocument();
$dom->loadHTML("your HTML here");
$images = $dom->getElementsByTagName("img");
foreach($images as $image) {
if( $image->getAttribute("alt")) continue;
// do something to $image here, which doesn't have an [alt] attribute
}
If within the same line, you can use this,
<img(?!.*\s+alt\s*=).+$
Demo
You can use this expression:
<img[^>]*alt=[^>]*>
Consider, I have the following lines of code in a single variable of type string:
let a='<img alt="image1" height="200" src="image1.jpg" width="800">
<img alt="image2" src="image2.jpg" height="501" width="1233">
<img alt="image3" width="823" height="223" src="image3.jpg">'
Note that the properties of the various images can be in different order.
I need to remove all the height and width elements from the string.
let a=`<img alt="image1" height="200" src="image1.jpg" width="800">
<img alt="image2" src="image2.jpg" height="501" width="1233">
<img alt="image3" width="823" height="223" src="image3.jpg">`;
let clean = a.replace(/((height|width)="\d*")/g, "");
Regex replace will remove your width and height. I've used back ticks on the string because it was multi line. The replace function takes in a regex, with the global flag to remove all occurrences and replaces them with nothing.
I'm using WKWebView loading html string, some end of html string have a few of ugly image links, i want to hide them.
The css use to hide image, but not works.
.article img[src* = "/smilies/"],
.article img[src* = ".feedburner.com/~ff/"],
.article img[src* = ".feedburner.com/~r/"],
.article img[src* = ".feedblitz.com/"]
{
display: none;
}
The sample html string with feedburner src i want to hide :
<div>
<img src="http://feeds.feedburner.com/~ff/Venturebeat?d=yIl2AUoC8zA" border="0"> <img src="http://feeds.feedburner.com/~ff/Venturebeat?d=qj6IDK7rITs" border="0"> <img src="http://feeds.feedburner.com/~ff/Venturebeat?i=H9eoOCii8XI:sanX3-jfWnw:V_sGLiPBpWU" border="0"> <img src="http://feeds.feedburner.com/~ff/Venturebeat?d=I9og5sOYxJI" border="0"> <img src="http://feeds.feedburner.com/~ff/Venturebeat?i=H9eoOCii8XI:sanX3-jfWnw:D7DqB2pKExk" border="0">
</div>
A quick and dirty way to achieve this is by using regular expressions. Mind you that this is really not ideal for long HTML files as it is not as efficient as a real HTML parser.
// The HTML you posted
NSString *HTML = #"<div>\n\t<img src=\"http://feeds.feedburner.com/~ff/Venturebeat?d=yIl2AUoC8zA\" border=\"0\"> <img src=\"http://feeds.feedburner.com/~ff/Venturebeat?d=qj6IDK7rITs\" border=\"0\"> <img src=\"http://feeds.feedburner.com/~ff/Venturebeat?i=H9eoOCii8XI:sanX3-jfWnw:V_sGLiPBpWU\" border=\"0\"> <img src=\"http://feeds.feedburner.com/~ff/Venturebeat?d=I9og5sOYxJI\" border=\"0\"> <img src=\"http://feeds.feedburner.com/~ff/Venturebeat?i=H9eoOCii8XI:sanX3-jfWnw:D7DqB2pKExk\" border=\"0\">\n</div>";
// A string containing source of the images that you want to delete
NSString *source = #"http://feeds.feedburner.com/~ff/";
// Builds a pattern that matches the tags of the images you want to delete
NSString *pattern = [NSString stringWithFormat:#"<img src=\"%#.+?>", source];
// The actual delete operation
NSString *cleanHTML = [HTML stringByReplacingOccurrencesOfString:pattern
withString:#""
options:NSRegularExpressionSearch
range:NSMakeRange(0, HTML.length)];
// Do what you want with the cleaned HTML (display it, ...)
NSLog(#"%#", cleanHTML);
This problem has been driving me up the wall for months. I can't figure out why my background on my website:
www.the-ruck.us
Doesn't load properly.
I know the code works, because when I run it on my computer, everything loads fine. However, when I publish it to the web, and browse to my page, the slideshow just stays blank.
Here's the API for the XMLLoader class I use
Here's the code:
var slideshowXMLLoader:XMLLoader = new XMLLoader("slideshow.xml", {autoDispose:true, onComplete:LoadXML});
slideshowXMLLoader.load();
function LoadXML(e:Event) {
slideshowXML = new XML(e.target.content);
parse(slideshowXML);
}
function parse(ssXML:XML) { wallpaperLinks = slideshowXML.img.attributes(); }
function loadFirstPaper() {
ticker.addEventListener(TimerEvent.TIMER, changePaper);
TweenMax.to(landing, .5, {alpha:0, ease:Quint.easeOut});
TweenMax.to(bloomer, 1, {alpha:0, ease:Quint.easeOut});
loadWallpaper(randomNumber());
}
function loadWallpaper(i:Number) {
paperCounter = i;
var loader:Loader = new Loader();
var req:URLRequest = new URLRequest(wallpaperLinks[paperCounter]);
loader.load(req);
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, fadeIn);
}
function fadeIn(e:Event) {
if (!isPaused) ticker.start();
var temp = e.target.content;
wallpaper.addChild(temp);
TweenMax.from(temp, fadeTime, {alpha:0, ease:Quint.easeOut});
}
function changePaper(e:Event) {
ticker.stop();
loadWallpaper(randomNumber());
}
function randomNumber():Number
{ return Math.floor(Math.random() * 53); }
}
slideshow.xml contains this:
<wallpapers>
<img link="imgs/one.jpg"></img>
<img link="imgs/two.jpg"></img>
<img link="imgs/three.jpg"></img>
<img link="imgs/four.jpg"></img>
<img link="imgs/five.jpg"></img>
<img link="imgs/six.jpg"></img>
<img link="imgs/seven.jpg"></img>
<img link="imgs/eight.jpg"></img>
<img link="imgs/nine.jpg"></img>
<img link="imgs/ten.jpg"></img>
<img link="imgs/eleven.jpg"></img>
<img link="imgs/twelve.jpg"></img>
<img link="imgs/thirteen.jpg"></img>
<img link="imgs/fourteen.jpg"></img>
<img link="imgs/fifteen.jpg"></img>
<img link="imgs/sixteen.jpg"></img>
<img link="imgs/seventeen.jpg"></img>
<img link="imgs/eighteen.jpg"></img>
<img link="imgs/nineteen.jpg"></img>
<img link="imgs/twenty.jpg"></img>
<img link="imgs/twentyone.jpg"></img>
<img link="imgs/twentytwo.jpg"></img>
<img link="imgs/twentythree.jpg"></img>
<img link="imgs/twentyfour.jpg"></img>
<img link="imgs/twentyfive.jpg"></img>
<img link="imgs/twentysix.jpg"></img>
<img link="imgs/twentyseven.jpg"></img>
<img link="imgs/twentyeight.jpg"></img>
<img link="imgs/twentynine.jpg"></img>
<img link="imgs/thirty.jpg"></img>
<img link="imgs/thirtyone.jpg"></img>
<img link="imgs/thirtytwo.jpg"></img>
<img link="imgs/thirtythree.jpg"></img>
<img link="imgs/thirtyfour.jpg"></img>
<img link="imgs/thirtyfive.jpg"></img>
<img link="imgs/thirtysix.jpg"></img>
<img link="imgs/thirtyseven.jpg"></img>
<img link="imgs/thirtyeight.jpg"></img>
<img link="imgs/thirtynine.jpg"></img>
<img link="imgs/fourty.jpg"></img>
<img link="imgs/fourtyone.jpg"></img>
<img link="imgs/fourtytwo.jpg"></img>
<img link="imgs/fourtythree.jpg"></img>
<img link="imgs/fourtyfour.jpg"></img>
<img link="imgs/fourtyfive.jpg"></img>
<img link="imgs/fourtysix.jpg"></img>
<img link="imgs/fourtyseven.jpg"></img>
<img link="imgs/fourtyeight.jpg"></img>
<img link="imgs/fourtynine.jpg"></img>
<img link="imgs/fifty.jpg"></img>
<img link="imgs/fiftyone.jpg"></img>
<img link="imgs/fiftytwo.jpg"></img>
<img link="imgs/fiftythree.jpg"></img>
</wallpapers>
I've tried running Firebug on my site, and, unless I was doing that wrong, too, no errors or warnings came up. So I'm completely stumped. Anybody have any ideas?
Any help is deeply appreciated, thank you.
OK here is what I believe is happening. I went to your site and it throws a null reference error in loadWallpaper(). This only thing in loadWallpaper() that could be null that I can tell is wallpaperLinks. wallpaperLinks is set after the XMLLoader has completed it's load. You didn't show the code that calls loadFirstPaper(). So I bet you have a race condition. On your computer, the local load of the XML happens faster than online so you don't see it local.
Do this, move you loadFirstPaper call to here:
function parse(ssXML:XML) {
wallpaperLinks = slideshowXML.img.attributes();
loadFirstPaper();
}
Figured it out. The problem was
var slideshowXMLLoader:XMLLoader = new XMLLoader("slideshow.xml", {autoDispose:true, onComplete:LoadXML});
Either the XMLLoader wasn't doing it's job at all; or, and I think this is more likely, the onComplete event was firing prematurely. I replaced the above line with:
var slideshowXMLLoader:URLLoader = new URLLoader();
slideshowXMLLoader.addEventListener(Event.COMPLETE, loadXML);
slideshowXMLLoader.load(new URLRequest("slideshow.xml"));
It currently appears to be working as intended.
I would still like to know how to make onComplete calls work properly, so if anybody has any advice, I would love to hear it.
Thanks.