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
Related
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:
Parse an HTML string with JS
(15 answers)
Closed 3 years ago.
Take the following:
<span class='exclass'>1.</span> Lorem Ipsum <span class="exclass2" title="This is an example">*</span>
I am trying to create a regex expression that will select:
<span class='exclass'>1.</span>
AND
<span class="exclass2" title="This is an example">*</span>
Regex expressions like ^(<span(.*)<\/span>)$ select all of the text.
What expression will select the two complete tags and ignore the loose text between them? (Lorem Ipsum)
Regex is not good way to find HTML tags. But this should work for you-
<\s*span[^>]*>(.*?)<\s*\/\s*span>
DEMO: https://regex101.com/r/vbLN9L/6
This question already has answers here:
Why does some of my text within html paragraph tag fall outside of the <p></p>when in browser
(3 answers)
Closed 7 years ago.
I was just testing something and noticed that text inside pre tag does not appear if you access it using parent element.
Following is the code example:
JSFiddle
(function() {
var _innerText = document.getElementById("content").innerText;
var _innerHTML = document.getElementById("content").innerHTML;
var _textContent = document.getElementById("content").textContent;
console.log(_innerText, _innerHTML, _textContent)
console.log($("#content").text());
})()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<p id="content">
p text
<pre>Pre text</pre>
<small>small text</small>
</p>
I also noticed that anything after it is also not fetched. If you move small before pre, text appears. What could be the reason for it?
You cannot nest block-level elements, such as <pre>, inside <p> in HTML. Your code block rendered as following in browser.
<p id="content"> p text </p>
<pre>Pre text</pre>
<small>small text</small>
<p></p>
You can use div instead of p.
Because you can't put "pre" in "p" tag, try "div":
<div id="content">
p text
<pre>Pre text</pre>
<small>small text</small>
</div>
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:
How to use JavaScript regex over multiple lines?
(8 answers)
Closed 8 years ago.
I have text that I want to remove and replace. I've have two tags which it lies between:
<!--start--></span>
</p>
<p id="nameIs" style="font-size: 12pt;">Dear Mr Johnstone,</p>
<p style="font-size: 12pt;">400 Isle Road</p>
<p style="font-size: 12pt;">Here Road</p>
<p style="font-size: 12pt;">KP33 7OL</p>
<p><span style="font-size: 12pt;"><!--end-->
I wan to to replace the text but I can't make the regex work. It seems not to find the text:
var textholder2 = textholder.replace(/<!--start-->.*<!--end-->/, idToUseIs)
idToUseIs is the replacement text.
thanks
textholder.replace(/<!--start-->(.|\n|\r)+<!--end-->/g, idToUseIs)
You dont need regex for fixed string.
Just use substring and simple maths.
var tok1 = "<!--start-->"
var tok2 = "<!--end-->"
textholder2 = textholder2.substring(0, s.indexOf(tok1)) +
textholder2.substring(textholder2.indexOf(tok2)+tok2.length