CODEWITHSUNDEEP
tampermonkeygreasemonkey-4
Retsu Asakura
Retsu Asakura

Reputation: 13

How to replace tag textContent with value of title attribute

This site has many Bootstrap-style cards where the top of the card text is the item name.

After a certain number of characters that name will automatically be shortened with ... at the end of title.

The tooltip description when hovering the title is not shortened. I wish to create a userscript to automatically replace the abbreviated product name with the description in tooltip.

So from these

<div class="card-item-title">
            <a href="/katalog/produk/detail/51474714?lang=id&amp;type=province&amp;location_id=13" data-toggle="tooltip" data-placement="bottom" title="Tanpa Merek Pekerjaan Pemasangan ACP 0,3 PVDF 4 mm">Tanpa Merek Pekerjaan Pemasangan ACP 0,3 PVDF...</a>
        </div>

To these

<div class="card-item-title">
            <a href="/katalog/produk/detail/51474714?lang=id&amp;type=province&amp;location_id=13" data-toggle="tooltip" data-placement="bottom" title="Tanpa Merek Pekerjaan Pemasangan ACP 0,3 PVDF 4 mm">Tanpa Merek Pekerjaan Pemasangan ACP 0,3 PVDF 4 mm</a>
        </div>

Upvotes: 0

Views: 31

Answers (1)

cssyphus
cssyphus

Reputation: 40038

Something like this should work:

// ==UserScript==
// @name         https://e-katalog.lkpp.go.id titles
// @namespace    http://tampermonkey.com
// @version      0.1
// @match        https://e-katalog.lkpp.go.id/productsearchcontroller/listproduk?authenticityToken=*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=go.id
// @grant        none
// ==/UserScript==

(async function() {
    'use strict';
    const $ = document.querySelector.bind(document);
    const $$ = document.querySelectorAll.bind(document);

    while ( !$('#boxContent .row .card-list .col-md-3.col-md-3-custom .card-item.card-item-custom .card-item-detail .card-item-title a') ){
        await sleep(100);
    }
    $$('#boxContent .row .card-list .col-md-3.col-md-3-custom .card-item.card-item-custom .card-item-detail .card-item-title a').forEach( el => {
        const ttl = el.title;
        el.textContent = ttl;
    });

})();
function sleep(ms){
    return new Promise(function (resolve, reject) {
        setTimeout(()=>{
            resolve();
        },ms);
    })
}

Upvotes: 0

Related Questions