How can I use javascrip to detect if this code is present on that specific webpage?
If the user access to the page, the page will generate this code and will not show this code if the user do not access to the page.
<div class="D(f) Jc(fs) Ai(c) Fld(r) Mb(4px)">
<div class="Sq(8px) Bgc($c-active-indicator) Bdrs(50%) Mend(6px) My(4px)"></div>
<span class="C(#fff) Fz($xs)">Recently Active</span>
</div>`
Note: I do not have access to the webpage to change it.
Is there a parent element wrapping this? apart from body?
e.g.
<div id='i-wrap-this'>
<div class="D(f) Jc(fs) Ai(c) Fld(r) Mb(4px)">
<div class="Sq(8px) Bgc($c-active-indicator) Bdrs(50%) Mend(6px) My(4px)"></div>
<span class="C(#fff) Fz($xs)">Recently Active</span>
</div>
</div>
If so, you could target that parent to examine it’s contents/children.
The class names are quite cryptic. Is class="D(f) Jc(fs) Ai(c) Fld(r) Mb(4px)" unique? Unique in that it will only appear with that specific code?
Not particularly pretty, but a first attempt
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<div class='somthing-else'></div>
<div class='D(f) Jc(fs) Ai(c) Fld(r) Mb(4px)'>
<div class='Sq(8px) Bgc($c-active-indicator) Bdrs(50%) Mend(6px) My(4px)'></div>
<span class='C(#fff) Fz($xs)'>Recently Active</span>
</div>
<script>
const divs = Array.from(document.querySelectorAll('div'))
const parentClass = 'D(f) Jc(fs) Ai(c) Fld(r) Mb(4px)'
const childDivClass = 'Sq(8px) Bgc($c-active-indicator) Bdrs(50%) Mend(6px) My(4px)'
const childSpanClass = 'C(#fff) Fz($xs)'
const childSpanText = 'Recently Active'
const match = divs.filter(elem => elem.className === parentClass)
.filter(elem => elem.childElementCount === 2)
.filter(elem => {
const firstChild = elem.firstElementChild
if (firstChild.nodeName !== 'DIV') return false
return firstChild.className === childDivClass
})
.filter(elem => {
const lastChild = elem.lastElementChild
if (lastChild.nodeName !== 'SPAN') return false
return lastChild.className === childSpanClass && lastChild.textContent === childSpanText
})
.length === 1
console.log(match)
</script>
</body>
</html>
Just for the fun of it, a bit of refactoring
const divMatch = elem => (
elem.className === 'D(f) Jc(fs) Ai(c) Fld(r) Mb(4px)' && elem.childElementCount === 2
)
const firstChildMatch = elem => {
const firstChild = elem.firstElementChild
return firstChild.nodeName === 'DIV' && firstChild.className === 'Sq(8px) Bgc($c-active-indicator) Bdrs(50%) Mend(6px) My(4px)'
}
const lastChildMatch = elem => {
const lastChild = elem.lastElementChild
return lastChild.nodeName === 'SPAN' && lastChild.className === 'C(#fff) Fz($xs)' && lastChild.textContent === 'Recently Active'
}
const divs = Array.from(document.querySelectorAll('div'))
const match = [
divMatch,
firstChildMatch,
lastChildMatch
].reduce((elems, filterFn) => elems.filter(filterFn), divs)
.length === 1
console.log(match)
I think that this part is relevant too.
What techniques exist to check those things when he can’t change the webpage?
Good point.
romeoanc - are you wanting to check the webpage that some other user has visited?
yes, that is the idea, to know who just visited the page.
Bit of a misnomer really - Javascript can change any webpage. For you. Locally. (This is how things like Tampermonkey work; DOM manipulation and script injection.) The DOM is an object rendered at real-time by the browser, and can be manipulated by, and read by, the browser in real-time.
Javascript can check any HTML code for the existence of elements, when you load the page. Yourself.
So: Can you have javascript find out if you have access? Yup. Absolutely.
Can you make it find out for everyone? Only if they’re running your javascript.
to rpg_digital
I tested the code, I checked each sentence, in my lab live server, to keep learning and see what they bring. ( part of my learning process ) . The code works well with 1 instance.
If I repeat the section 2 times or more ( that is what Is happening on the real site ( I don’t know why ) the function will bring a “false” result. How can I fix this the script ?
Something like this will bring - false- result
<div class='somthing-else'></div>
<div class='D(f) Jc(fs) Ai(c) Fld(r) Mb(4px)'>
<div class='Sq(8px) Bgc($c-active-indicator) Bdrs(50%) Mend(6px) My(4px)'></div>
<span class='C(#fff) Fz($xs)'>Recently Active</span>
</div>
<div class='somthing-else'></div>
<div class='D(f) Jc(fs) Ai(c) Fld(r) Mb(4px)'>
<div class='Sq(8px) Bgc($c-active-indicator) Bdrs(50%) Mend(6px) My(4px)'></div>
<span class='C(#fff) Fz($xs)'>Recently Active</span>
</div>
<div class='somthing-else'></div>
<div class='D(f) Jc(fs) Ai(c) Fld(r) Mb(4px)'>
<div class='Sq(8px) Bgc($c-active-indicator) Bdrs(50%) Mend(6px) My(4px)'></div>
<span class='C(#fff) Fz($xs)'>Recently Active</span>
</div>
Previous code had .length === 1 i.e. is one match found. Change that to > 0 or >= 1 (more than 0 or more than or equal to 1) should do the trick. Alternatively just return length if you want to know how many matches found
const match = [
divMatch,
firstChildMatch,
lastChildMatch
].reduce((elems, filterFn) => elems.filter(filterFn), divs)
.length >= 1
Just to be a clearer. This part of the code returns an array of matching divs.
const match = [
divMatch, firstChildMatch, lastChildMatch
].reduce((elems, filterFn) => elems.filter(filterFn), divs)
Based on matching the parent, checking if it has two children, checking the first child, and then checking the last child.
If you take off the ‘length’ chained on the end the output from your latest HTML is
v (3) [div.D(f)......]
0: div.D(f).Jc(fs).Ai(c).Fld(r).Mb(4px)
1: div.D(f).Jc(fs).Ai(c).Fld(r).Mb(4px)
2: div.D(f).Jc(fs).Ai(c).Fld(r).Mb(4px)
length: 3
Thank you for your excellent explanation!
You’re welcome.
Just an itch that needed scratching and an attempt at a more functional/declarative approach. Better, worse or even necessary, I don’t know, but thought I would share.
const pipe = (...funcs) => (initialValue) => funcs.reduce((value, func) => func(value), initialValue)
const hasMatchingValues = (elem, toMatch = {}) =>
Object.entries(toMatch)
.every(([key, value]) => elem[key] === value)
const hasMatchingValuesWith = toMatch => elem => hasMatchingValues(elem, toMatch)
const divMatch = elems =>
elems.filter(
hasMatchingValuesWith(
{
className: 'D(f) Jc(fs) Ai(c) Fld(r) Mb(4px)',
childElementCount: 2
}
)
)
const firstChildMatch = elems =>
elems.filter(({ firstElementChild }) =>
hasMatchingValues(
firstElementChild, // elements properties to match
{
nodeName: 'DIV',
className: 'Sq(8px) Bgc($c-active-indicator) Bdrs(50%) Mend(6px) My(4px)'
}
)
)
const lastChildMatch = elems =>
elems.filter(({ lastElementChild }) =>
hasMatchingValues(
lastElementChild,
{
nodeName: 'SPAN',
className: 'C(#fff) Fz($xs)',
textContent: 'Recently Active'
}
)
)
const match = pipe(
divMatch,
firstChildMatch,
lastChildMatch
)(Array.from(document.querySelectorAll('div')))
console.dir(match)
Thank you!
I am going to study what you sent.
I keep reading and learning… and I keep scratching my head and I get happy when I discovered things.
That’s great romeoanc, the same here 
This is awesome! Love the content thanks
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.