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="(.*?)"
Related
This question already has answers here:
Double quote in JavaScript string
(4 answers)
Escape quotes in JavaScript
(13 answers)
Closed 1 year ago.
I have some HTML and when a function is called, I want to change to text in a div that uses span. The idea is to be a sort of customized alert. I'm trying to use .innerHTML, but what I want to change has both quotations and span. Is there a way that I can get this to update?
Current HTML:
<div id="messageBox" class="messageBox">
<div id="picture"></div>
<div id="messageArea">"I need to update this <span class="keyWord">code</span> and keep the
quotations and keywords!"
</div>
</div>
This shows a box with a picture and
"I need to update this code and keep the quotations and the
keywords!"
The current javascript that I have is:
alertChange = document.getElementById("messageArea");
alertChange.innerHTML = ""This <span class="keyWord">code</span> needs to change!"";
It won't allow me to add the extra quotations or the span element.
The resulting text should be
"This code needs to change!"
Method 1 - Backslash escape
Escape the double quotes within your HTML string with the backslash \ character:
alertChange = document.getElementById("messageArea");
alertChange.innerHTML = "\"This <span class=\"keyWord\">code</span> needs to change!\"";
<div id="messageBox" class="messageBox">
<div id="picture"></div>
<div id="messageArea">"I need to update this <span class="keyWord">code</span> and keep the
quotations and keywords!"
</div>
</div>
Further reading: String - JavaScript | MDN#Escape Notation
Method 2 - Using template strings
Declare your string as a template literal by encapsulating it in backtick characters:
alertChange = document.getElementById("messageArea");
alertChange.innerHTML = `"This <span class="keyWord">code</span> needs to change!"`;
<div id="messageBox" class="messageBox">
<div id="picture"></div>
<div id="messageArea">"I need to update this <span class="keyWord">code</span> and keep the
quotations and keywords!"
</div>
</div>
Further reading: Template literals (Template strings) - JavaScript | MDN
Method 3 - Single quote (') encapsulation
In this specific case, since you haven't used single quotes anywhere in your string, you can simply declare the HTML string by encapsulating it in single quote characters. Be forewarned that this will break if for whatever reason your text changes to include a single quote, which would then force you to escape them as detailed in Method 1.
alertChange = document.getElementById("messageArea");
alertChange.innerHTML = '"This <span class="keyWord">code</span> needs to change!"';
<div id="messageBox" class="messageBox">
<div id="picture"></div>
<div id="messageArea">"I need to update this <span class="keyWord">code</span> and keep the
quotations and keywords!"
</div>
</div>
You need to use the Backslash \ to "escape" the special character (in your case the double quote symbol) like this
alertChange.innerHTML = "\"This <span class=\"keyWord\">code</span> needs to change!\"";
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}`} />
This question already has answers here:
Javascript - How to get attribute value from a tag, inside a specific div class?
(5 answers)
Closed 3 years ago.
I have a following html code:
<div data-123 style="background-color: green; color: red;">
<div style="background-color: green;">Hello World <p>Another tag</p></div>
</div>
I am trying to match style attribute for which I use this regex:
/(style=)("|')(\w.+)("|')/i
I only want to match only the first line i.e. if there's no style tag in first line/tag, then it shouldn't match the next line for style tag.
I tried the following but it doesn't work:
/\A.*(style=)("|')(\w.+)("|')/i
Don't use RegEx to extract attibutes/elements from string.
You can use DOM APIs to extract an attribute value.
const str = `<div data-123 style="background-color: green; color: red;">
<div style="background-color: green;">Hello World <p>Another tag</p></div>
</div>`;
const el = document.createElement('div');
el.innerHTML = str;
const div = el.querySelector('div[data-123]');
console.log(div.getAttribute('style'));
I think your issue is due to greedy behavior of regex matching. Try to convert the regex to non-greedy matching. Please check https://javascript.info/regexp-greedy-and-lazy
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);