How to get correct class element from HTML using VBA - html

I am trying to extract this website using VBA
This is the HTML I want to Target
<div class="claim"> <div num="1" id="US-6627754-B2-CLM-00001" class="claim">
to get data for various numbers, only constant things is
<div class ="claims" and class ="claim"
rest of the html is dynamic.
following code just works fine for first element.
oHtml.getElementsByClassName("claim").Item.innerHTML
for this case
oHtml.getElementsByTagName("div")(90).innerHTML
also gives desired result.
I don't have basic knowledge of HTML or VBA.
I know that this is not correct as it gives duplicate entry one for div class="claim" and other for class="claim" and div(90) is not always constant.
How to just target
<div class = "claim"
Tried oHtml.getElementsByTagName("div")(90).getElementsByClassName("claim").Item.innerHTML
but did not gave results. For this specific website it is at div 90. again its not constant.

Have you tried finding ir by using the id as this is uniqe and can only be used once so you won't get duplicates ! On my phone atm so can't give eg if you need I will when on my computer! I'm studying both html and vba not a pro but I think I know what i'm doing!

Related

Extract values from HTML when parent div contains a specific word (multi-nested divs)

I copy the HTML of a "multi-select" list from a page which looks like that:
and then paste the HTML version (after beautifying it online) in a notepad++ page.
I know want to use Regex in order to extract the lines that are enabled in that list. In other words, I want to see what options I had selected from that dropdown. There are many lines and it is impossible to scroll and find them all. So, the best way in my mind is to use that HTML and search for the divs that contain "enabled". Then, the inner divs should have the values that I am looking for.
The HTML is shown below:
<div class="ui-multiselect-option-row" data-value="1221221111">
<div class="ui-multiselect-checkbox-wrapper">
<div class="ui-multiselect-checkbox"></div>
</div>
<div class="ui-multiselect-option-row-text">(BASE) OneOneOne (4222512512)</div>
</div>
<div class="ui-multiselect-option-row ui-multiselect-option-row-selected" data-value="343333434334">
<div class="ui-multiselect-checkbox-wrapper">
<div class="ui-multiselect-checkbox"></div>
<div class="ui-multiselect-checkbox-selected">✔</div>
</div>
<div class="ui-multiselect-option-row-text">(BASE) TwoTwoTwo (5684641230)</div>
</div>
The outcome should return the following value only (based on the above):
(BASE) TwoTwoTwo (5684641230)
So far, I have tried using the following regex in notepad++:
<div class="ui-multiselect-option-row ui-multiselect-option-row-selected"(.*?)(?=<div class="ui-multiselect-option-row")
but it is impossible to mark all the lines at the same time and remove the unmarked ones. Notepad++ only marks the first line of the entire selection. So, I am thinking whether there is a better way - a more complex regex that can parse the value directly. So, in lines:
a) I either want to make the above work with another regex line in notepad++ (I am open to visualstudio if that makes it faster)
b) Or an easier way using the console in Chrome to parse the selected values. I would still like to see the regex solution but for Chrome console I have an
Update 1:
I used this line $('div.ui-multiselect-option-row-selected > div:nth-child(2)')
and all I need know, as I am not that familiar with the Chrome console export, is to get the innerHTML from the following lines:
Update 2:
for (var b in $('div.ui-multiselect-option-row-selected > div:nth-child(2)')){
console.log($('div.ui-multiselect-option-row-selected > div:nth-child(2)')[b].innerHTML);
which works and I now only have to export the outcome
}
Open up Chrome's Console tab and execute this:
$x('//div[contains(#class, "ui-multiselect-option-row-selected")]/div[#class="ui-multiselect-option-row-text"]/text()')
Here is how it should look using your limited HTML sample but duplicated.
If you have multiple multi-selects and no unique identifier then count which one you need to target (notice the [1]):
$x('//div[contains(#class, "ui-multiselect-option-row-selected")][1]/div[#class="ui-multiselect-option-row-text"]/text()')
All you have to do is use css selectors followed by a .map to get all the elements' innerHTML in a list
[...$('div.ui-multiselect-option-row-selected > div:nth-child(2)')].map(n => n.innerHTML)
The css selector is div.ui-multiselect-option-row-selected > div:nth-child(2) - which, as I've already mentioned in my comment, selects the 2nd immediate child of all divs with the ui-multiselect-option-row-selected class.
Then we just use some javascript to turn the result into a list and do a map to extract all the innerHTML. As you asked.
If the list is sufficiently big, you might consider storing the result of [...$('div.ui-multiselect-option-row-selected > div:nth-child(2)')].map(n => n.innerHTML) in a variable using
const e = [...$('div.ui-multiselect-option-row-selected > div:nth-child(2)')].map(n => n.innerHTML);
and then doing
copy(e);
This will copy the list into your clipboard, wherever you use ctrl + v now - you'll end up pasting the list.

Html selector using Regex

So there is a page that I want to perform some action on with puppeteer. The problem is that there is a text area in which I want to type in something however the id of it is :
id="pin-draft-title-13a10e18-5a1e-49b9-893c-c5e028dc63e1"
As you might have guess for some reason only pin-draft-title remains the same but the whole number part changes for every refresh so puppeteer can't find it. I tried deleting the id and copying the selector itself the whoe #_Root div>div etc but that seems to be changing after sometime as well. So the main question is is there any way i can just select it using the pin-draft-title part and no matter what numbers follow it still selects it ?
You can use [id^=pin-draft-title-]
In case of javascript, if you want to select all the elements whos ID starts with a specified string or pattern, in your case "pin-draft-title", then consider using the following syntax.
document.querySelectorAll('[id^="pin-draft-title"]');

Thymeleaf conditional with two variables

I am currently trying to hide specific elements, if the creditUser in my app has credit less than the costs of a specific dish. (It's kind of a dish ordering system, just for training purposes) And I cannot figure out how to set up the thymeleaf condition, to make it work...
I've tried all kinds of solutions, but all I can find on the internet is something like this: th:if="*{ score < 20 and score >= 0}"
my current version looks like this:
<td ><a th:if="${creditUser.credit} > ${dish.small}" class="btn btn-success" th:href="#{/order/orderDish/(creditUserId=${creditUser.id},dishId=${dish.dishId},delId=${dish.delId},dishName=${dish.name},price=${dish.small})}" th:text="${dish.small}">Bestellen</a></td>
Now I don't get any error messages, but the element is also not showing up. Any suggestions on how to compare a value in thymeleaf to another value? (The creditUser is passed it is just not shown in the code part and the solution works with fixed values like creditUser.credit > 1)
Everything should be inside the same braces:
th:if="${creditUser.credit > dish.small}"

HTML-assigned 'id' Missing in DOM

Within the Moodle (v. 3.5.7) Atto editor (using both Chrome and Firefox) I've been trying to assign an ID to a particular row class, "span9". My ultimate objective is to assign this a unique ID and reference this element via jquery so as to append another element within it.
The ISSUE is that once I add an ID (id="checklist01") and click save, the ID simply does not appear in the DOM, and seems to not exist. When I re-enter the atto editor however, voila, there it is just sitting there. So it's NOT being removed completely... just not expressed somehow?
I have 2 screenshots linked below showing (1) the editor view, with the element and assigned ID highlighted, and (2) a screenshot of the DOM once the changes have been saved, with that same area highlighted, without the assigned ID.
Screenshots of ID Missing from DOM
Bootstrap ver. 4
So far I've tried switching the placement of the id in the atto editor (class coming first vs second after ); tried to add a "span" in front of the id (for some reason, I was desperate); and really just searched all over for someone who has encountered something similar.
I'm not sure how much help the html will provide, but here it is:
<div class="row-fluid colored">
<div class="iconbox span3">
h4>Your Completion Status (%)</h4>
</div>
<div id="checklist01" class="span9">
</div>
</div>
I found the reason for the removal of id attributes.
id attributes are removed because "Checklist" activity used safe HTML function of Moodle. If you want to access id attributes of description HTML follow below steps.
Go to mod\checklist\locallib.php file.
Then search formatted_intro() function (which is around line number 880).
In that function they used Moodle's format_text() function to return description text.
In that function, they have used 3 parameters.
string $text The text to be formatted.
int $format Identifier of the text format to be used
object/array $options text formatting options
Replace
$opts = array('trusted' => $CFG->enabletrusttext);
to
$opts = array('trusted' => $CFG->enabletrusttext,'allowid'=>true);
Then save your file and check. By following the above steps you can use id attributes.

Selecting some kind of closest child with jQuery seems not to work

I try to implement a nested tab module the following way.
By clicking on a .tabs__menu item I want to get the next .tabs__contents to display the correct entry.
I've prepared a codepen with markup and leave out all unimportant code so don't be irritated that it's not working. I don't understand why the variable debug2 is 0 and debug3 is 1. I expect debug2 to be 1 as well since I expect the following expression should find the element. Can anyone help me with this?:
.find(".tabs__contents").not(".tabs__contents .tabs__contents");
https://codepen.io/anon/pen/JNLWQp
Thanks in advance and best wishes,
duc
ok I have an assumption why it's not working. It seems that the .not method doesn't starts to search relatively from the given collection but globally. With this statement
.not(".tabs__contents .tabs__contents")
debug2 finds itself and exclude it from the collection thats why the length is 0.