This question already has answers here:
Template literals like 'some ${string}' or "some ${string}" are not working
(7 answers)
Closed 2 years ago.
I want to use js syntax to have diffrent URL for each image. Robohash website give us random robot image if we use diffrent URL ending, in that way i want to do below, but looks like ${props.id} is not treated as syntax but just as a part of URL, so im gets the same image for all.
<img alt='robots' src={"https://robohash.org/${props.id}"} />
<img alt='robots' src={`https://robohash.org/${props.id}`} />
You should use template string using backticks:
<img alt='robots' src={`https://robohash.org/${props.id}`} />
Related
This question already has answers here:
RegEx match open tags except XHTML self-contained tags
(35 answers)
Closed 2 years ago.
I have this string
<img class="img-thumbnail thumb" style="width:100px;height:100px;" src="data:image/png;base64,/9j/4AAQMCgsOCwkJDRENDgBAQjKv+I1atf2Q==" class="img-thumbnail thumb" style="width:100px;height:100px;"
and I just want to grab
data:image/png;base64,/9j/4AAQMCgsOCwkJDRENDgBAQjKv+I1atf2Q==
I've tried multiple attempts on regexr. I'm a bit stuck and so far I have
src="(.*)". I'm not sure how to get it to stop at that next quote.
https://regexr.com/53gio
You can use DOMParser api
let str = `<img class="img-thumbnail thumb" style="width:100px;height:100px;" src="data:image/png;base64,/9j/4AAQMCgsOCwkJDRENDgBAQjKv+I1atf2Q==" class="img-thumbnail thumb" style="width:100px;height:100px;" />`
let parser = new DOMParser()
let parsed = parser.parseFromString(str, "text/html");
[...parsed.getElementsByTagName('img')].forEach(v=>{
console.log(v.src)
})
This works fine for me
src="([^"]*)"
Use the lazy (?) qualifier to grab as few characters as possible and then end on the quote.
src="(.*?)"
This question already has answers here:
Parse an HTML string with JS
(15 answers)
Closed 3 years ago.
Regex expression is working when the content is in the same line. But it does not work if the same content is in multiple line. Please identify a mistake
Regex:
<([^\s]+).*?id="opensource".*?>(.+?)<\/\1>
It works with content in same line:
<article id="opensource">Cabby </article>
It does not works with content in different line:
<article id="opensource">
Cabby
</article>
You need to account for the whitespace characters.
<([^\s]+).*?id="opensource".*?>(?:\s+)?(.+?)(?:\s+)?<\/\1>
Here is a working example: https://regex101.com/r/OQH7A5/1
This question already has answers here:
My regex is matching too much. How do I make it stop? [duplicate]
(5 answers)
Closed 5 years ago.
My goal is to replace all tags by [src] only
hello <img class="gif" src="https://media2.giphy.com/media/zU4MLqeDvGA0M/100.gif" title="1"> hello
world <img class="gif" src="https://media2.giphy.com/media/zU4MLqeDvGA0M/100.gif" title="2"> hello2
by
[https://media2.giphy.com/media/zU4MLqeDvGA0M/100.gif] [https://media2.giphy.com/media/zU4MLqeDvGA0M/100.gif]
https://regex101.com/r/ZPOCCe/1
(My regex works fine ONLY where there is a line between the 2 images. It looks like it is greedy)
Any idea ?
You can use .*? (add a question mark after) to make the regex lazy instead of greedy (just .*).
This question already has answers here:
What to do Regular expression pattern doesn't match anywhere in string?
(8 answers)
Closed 8 years ago.
I want to use JavaScript to match ALL content between <div class="class-test"> and </div>. What RegExp should I use?
The complicated part is, there might be some more HTML tags inside it. For example:
<div class="class-test">
<div> this is a sub div </div>
<p>this is a p</p>
</div>
BTW, The HTML is not real HTML but just pure text. So it's not possible to 'parse' it. I am actually using Node.JS to modify a HTML file.
Thanks.
You can do this easily with a module like cheerio:
var cheerio = require('cheerio');
var $ = cheerio.load('<div class="class-test"><div> this is a sub div </div><p>this is a p</p></div>');
var content = $('div.class-test').html();
console.log(content);
This question already has answers here:
PHP DOMDocument getting Attribute of Tag
(2 answers)
Closed 9 years ago.
How can I get the image url which embeded in below media: thumbnail tag ?
<link href="http://example.com" type="text/html">
<media:content>
<media:thumbnail url="http://example2.com/1.jpg" width="150" height="100"></media:thumbnail>
</media:content>
</link>
I am looking for something like
var link = tag.querySelectorAll('link')[0];
var media = link.querySelector('media:content');
var thumbnail= link.querySelector('media:thumbnail');
var url= thumbnail.getAttribute('url');
but obviousely querySelector could not retrieve the value of media:content
Simply to use attr
jsfiddle example
$('media:thumbnail').attr('url');
This may help you