There is a task from different links to make formatting so that you can use css to make it so that they are in order an example

the engine forms such a block

<ul> <a class="Tooltip" href="threads/audi-tt-kuzov-mk1.6/"></a> <a class="Tooltip" href="threads/audi-tt-tuning-mk1.10/"></a> <a class="Tooltip" href="threads/audi-tt-zvik-mk1.4/"></a> <a class="Tooltip" href="threads/audi-tt-electronika-mk1.18/"></a> <a class="Tooltip" href="threads/audi-tt-dvizhok-mk1.25/"></a> <a class="Tooltip" href="threads/audi-tt-sets-mk1.1/"></a> </ul>

and on each page their position dynamically changes, but the words kuzov, dvizhok, etc. always figure out how to drive this list constantly and assign a class to the phrases in the link, for example:

 <ul> <a class="kuzov" href="threads/audi-tt-kuzov-mk1.6/"></a> <a class="tuning" href="threads/audi-tt-tuning-mk1.10/"></a> <a class="zvik" href="threads/audi-tt-zvik-mk1.4/"></a> <a class="electrika" href="threads/audi-tt-electronika-mk1.18/"></a> <a class="dvizhok" href="threads/audi-tt-dvizhok-mk1.25/"></a> <a class="sets" href="threads/audi-tt-sets-mk1.1/"></a> </ul>

and so on

I don't quite understand javascript

Tried on the model but it is impossible to find the phrase

 window.onload = function() { const template = ( link, title ) => `<li class="link-list-item"><a href="${ link }">${ title }</a></li>`; let messages = document.body.querySelectorAll( '.Tooltip' ); let html = Array.from( messages ).reduce( (result, element) => { let text = element.innerText; let titles = text.match( /dvizhok/g ); if( titles ){ let link = element.querySelector('.Tooltip').href; return result += template( link, titles[1] ) + '\n'; } return result; }, "" ); let linkList = document.body.querySelector('.link-list'); linkList.innerHTML = html;}

but this is most likely not in that steppe because you just need to leave the place to add a class, and I still don’t understand how to do it all with caching so that people don’t see that this happens while the page is loading

    2 answers 2

    You can use attribute selectors in CSS instead of classes.

     a[href*=engine] { color: green; } 
     <a href="/link-to-engine-of-audi">Engine Link</a>

    Or use them to find the necessary links:

     var keywords = ['dvizhok', 'kuzov', 'tuning', 'zvik', 'electrika']; keywords.forEach(word => { document.querySelectorAll('a[href*='+word+']') .forEach(el => el.classList.add(word)); }) 
     .kuzov{color: red;} .tuning{color: green;} .zvik{color: yellow;} .electrika{color: black;} 
     <ul> <li><a href="threads/audi-tt-kuzov-mk1.6/">1</a> <li><a href="threads/audi-tt-tuning-mk1.10/">2</a> <li><a href="threads/toyota-super-zvik-/">3</a> <li><a href="threads/mers-tt-electrika-mk1.18/">4</a> </ul>

    • Offer to create N selectors for attributes? You are cruel :) - user207618
    • Well n classes, you create something for something? I suggest using them instead of classes - vp_arth
    • Attributes are heavier in order than classes. - user207618
    • Added a js solution on the same selectors - vp_arth
    • one
      I thought I knew a lot about css, but that such things can be done really cool, it suits me because I will have a maximum of 10 classes, this is just for the forum and the css is faster from being drawn and it will not be noticeable that some manipulations are made with links. Thank you so much) - titan_ime

     Array.from(document.querySelectorAll('#target a')).forEach(a => { if(a.href.includes('threads/')){ a.classList.add(a.href.match(/[az]+-[az]+-([az]+)/i)[1]); } }); 
     <ul id='target'> <li> <a class="Tooltip" href="threads/audi-tt-kuzov-mk1.6/"></a> <a class="Tooltip" href="threads/audi-tt-tuning-mk1.10/"></a> <a class="Tooltip" href="threads/audi-tt-zvik-mk1.4/"></a> <a class="Tooltip" href="threads/audi-tt-electronika-mk1.18/"></a> <a class="Tooltip" href="threads/audi-tt-dvizhok-mk1.25/"></a> <a class="Tooltip" href="threads/audi-tt-sets-mk1.1/"></a> <a class="Tooltip" href="threads/daewooi-nexia-kuzov.50/"></a> </li> </ul>

    • here everything will just change in the links except for these phrases it is necessary when finding the phrase in the link in order to add the class that needs to be added while finding such a phrase - titan_ime
    • Understood nothing. Write clearer. It seems like your example of work. - user207618
    • Just here, as I understand, the processing clings to audi-tt- and in the forum the phrases themselves will change there daewooi-nexia-kuzov.50 / and so on - titan_ime
    • @titan_ime, here's how ... I would bring at least one example in the cap. OK, now fix it. - user207618