Nahrazení textu bez třídy – JavaScript, AJAX, jQuery – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu

Nahrazení textu bez třídy – JavaScript, AJAX, jQuery – Fórum – Programujte.comNahrazení textu bez třídy – JavaScript, AJAX, jQuery – Fórum – Programujte.com

 

czsars0
Newbie
4. 2. 2023   #1
-
0
-

Zdravím, podotýkám, že jsem laik. Snažím se nahradit stávající text na eshopu, ale nedaří se mi, protože neobsahuje class.

<label for="sendNewsletter"> <input type="checkbox" name="sendNewsletter" id="sendNewsletter" value="1"> Chci odebírat newslettery (určeno pro starší 16 let) </label>

potřeboval bych nahradit ten text "Chci odebírat newslettery (určeno pro starší 16 let)" na "Chci odebírat newslettery (Každý týden produkty za akční ceny!"

Zkoušel jsem tohle: 

<script>
$('label:contains("Chci odebírat newslettery (určeno pro starší 16 let)")').html('Chci odebírat newslettery (Každý týden produkty za akční ceny!)');
</script>

ale to mi odstraní celý řádek včetně zatržítka.

Děkuji moc za rady.

Nahlásit jako SPAM
IP: 2a02:768:b53d:516a:d67:1a32:3e56:7233...–
4. 2. 2023   #2
-
0
-

Zkusil bych získat všechny label pomocí GetElementsByTagName a pak v jejich InnerHtml hledat text "Chci odebírat newslettery (určeno pro starší 16 let)" a tam ho také nahradit svým textem.

hu

Nahlásit jako SPAM
IP: 2001:af0:ffe4:85f4:d180:974d:814c:fa3d...–
czsars0
Newbie
4. 2. 2023   #3
-
0
-

#2 hlucheucho
Děkuji za ochotu, nezkusil byste mi to zkusit napsat do scriptu? Jak jsem psal, jsem zelenáč. Pokud by to obsahovalo tu třídu, to bych zvládl, ale takto vůbec nevím, jak na to.

Nahlásit jako SPAM
IP: 2a02:768:b53d:516a:2961:8088:b6c8:96e3...–
czsars0
Newbie
4. 2. 2023   #4
-
0
-

#2 hlucheucho
Ještě podotýkám, že mám velmi omezené možnosti. Je to na platformě shoptetu a lze jen zadávat nějaké jednoduché scripty do jejich admin editoru.

Nahlásit jako SPAM
IP: 2a02:768:b53d:516a:2961:8088:b6c8:96e3...–
Nahlásit jako SPAM
IP: 2001:af0:ffe4:85f4:8838:c597:bca5:1904...–
czsars0
Newbie
4. 2. 2023   #6
-
0
-

Tak zatím nevyřešeno, kdyby jste někdo věděl, co s tím, budu vděčný. Děkuji

Nahlásit jako SPAM
IP: 2a02:768:b53d:516a:2961:8088:b6c8:96e3...–
weroro0
Návštěvník
4. 2. 2023   #7
-
0
-

#1 czsars


Je to viac menej určené presne na tvoj prípad (ten kus kódu, čo si ukázal), ale dá sa to teoreticky ľahko ohnúť aby to bolo viac univerzálne.

/**
 * @description Nahradí text v tele `<label>` elementu so zachovaním vnoreného `<input>` elementu
 *
 * @param {string} newLabelText Nový text, ktorým chceme nahradiť pôvodný text
 * @param {string} labelSelector CSS selektor, ktorým nájdeme label
 *
 * @returns {string} Pôvodný text
 */
function changeLabelText(labelSelector, newLabelText) {
    /** @type {Element} */
    const label = document.querySelector(labelSelector);

    /** @type {string} */
    const oldLabelText = label.textContent;

    /** @type {Element} */
    const input = label.querySelector(':scope > input');

    /** @type {Node} */
    const clone = input.cloneNode(true);

    /** @type {Text} */
    const textNode = document.createTextNode(newLabelText);

    label.innerHTML = '';

    label.appendChild(clone);
    label.appendChild(textNode);

    return oldLabelText;
}

Použitie:

changeLabelText('label[for=sendNewsletter]', 'Chci odebírat newslettery (Každý týden produkty za akční ceny!');
Nahlásit jako SPAM
IP: 78.98.120.–
Javascript (ES5, ES6+) / Typescript Developer, Vanilla Front-end ninja, HTML, CSS specialist

Hlúpa otázka vzniká ako reakcia na nedostatok relevantných informácií.
gna
~ Anonymní uživatel
1847 příspěvků
4. 2. 2023   #8
-
0
-

   

$('label[for="sendNewsletter"]').contents()[1].textContent = 'nazdar';
Nahlásit jako SPAM
IP: 213.211.51.–
weroro0
Návštěvník
4. 2. 2023   #9
-
0
-

#8 gna
 contents()[1] vráti input a ten nemá textContent. Takže treba contents()[2]

Nahlásit jako SPAM
IP: 78.98.120.–
Javascript (ES5, ES6+) / Typescript Developer, Vanilla Front-end ninja, HTML, CSS specialist

Hlúpa otázka vzniká ako reakcia na nedostatok relevantných informácií.
gna
~ Anonymní uživatel
1847 příspěvků
4. 2. 2023   #10
-
0
-

#9 weroro
Ono by to celkově chtělo inteligentnější filtr než index natvrdo. Ale máš pravdu, teď když jsem to zkusil, tak jsem si všiml, že před tím inputem je ještě mezera, takže jeden node navíc.

Nahlásit jako SPAM
IP: 213.211.51.–
weroro0
Návštěvník
5. 2. 2023   #11
-
0
-

#10 gna 

Možno takto. Tá jQuery verzia je predsa len kompaktnejšia ako vanilla.

/**
 * @description Nájde a nahradí hľadaný text novou hodnotou v zadefinovanom elemente
 *
 * @param {string} selector CSS selektor, ktorým nájdeme element
 * @param {string} search Hľadaný reťazec
 * @param {string} [replace] _[optional]_ Nový reťazec, ktorým bude nahradený nájdený reťazec
 *
 * @returns {void}
 */
function $replaceElementTextContent(selector, search, replace = '') {

    if (!selector?.trim() || !search?.trim()) return;

    $(selector).contents().each((index, node) => {
        if (node?.textContent?.trim() === search.trim())
            node.textContent = replace;
    });
}

Použitie:

$replaceElementTextContent(
    'label[for=sendNewsletter]',
    'Chci odebírat newslettery (určeno pro starší 16 let)',
    'Chci odebírat newslettery (Každý týden produkty za akční ceny!)'
);

----------------------
--------------------------

Pre úplnosť aj tá vanilla:

/**
 * @description Nájde a nahradí hľadaný text novou hodnotou v zadefinovanom elemente
 *
 * @param {string} selector CSS selektor, ktorým nájdeme element
 * @param {string} search Hľadaný reťazec
 * @param {string} [replace] _[optional]_ Nový reťazec, ktorým bude nahradený nájdený reťazec
 *
 * @returns {void}
 */
function replaceElementTextContent(selector, search, replace = '') {

    if (!selector?.trim() || !search?.trim()) return;

    document.querySelectorAll(selector).forEach(element => element.childNodes.forEach(node => {
        if (node?.textContent?.trim() === search.trim())
            node.textContent = replace;
    }));
}
Nahlásit jako SPAM
IP: 78.98.120.–
Javascript (ES5, ES6+) / Typescript Developer, Vanilla Front-end ninja, HTML, CSS specialist

Hlúpa otázka vzniká ako reakcia na nedostatok relevantných informácií.
czsars0
Newbie
5. 2. 2023   #12
-
0
-

Pánové, mockrát Vám děkuji. Nakonec mi funguje pouze tohle, ale to je spíše mou nevědomostí, jak přesně uváděné kódy vložit. Moc jste mi pomohli!

<script>
$('label[for="sendNewsletter"]').contents()[2].textContent = ' Chci odebírat newslettery (Každý týden produkty za akční ceny!) ';
</script>

Nahlásit jako SPAM
IP: 2a02:768:b53d:516a:2961:8088:b6c8:96e3...–
weroro0
Návštěvník
5. 2. 2023   #13
-
0
-

#12 czsars

Riešenie od gna #8 je síce funkčné a minimalistické, je však aj extrémne náchylné na chybovosť, pretože stačí jediná malá zmena v html tvojho <label> alebo prehliadač, ktorý bude inak interpretovať medzery medzi elementami a už ten script fungovať nebude.

Stačí to vložiť takto:

<script>
function $replaceElementTextContent(selector, search, replace = '') {
    if (!selector?.trim() || !search?.trim()) return;
    $(selector).contents().each((index, node) => {
        if (node?.textContent?.trim() === search.trim())
            node.textContent = replace;
    });
}
$replaceElementTextContent(
    'label[for=sendNewsletter]',
    'Chci odebírat newslettery (určeno pro starší 16 let)',
    'Chci odebírat newslettery (Každý týden produkty za akční ceny!)'
);
</script>

A potom ak by bolo viac miest, kde by si chcel meniť podobným spôsobom text, stačí iba volať $replaceElementTextContent 

napr.

$replaceElementTextContent(
    'div.product.name',
    'Káva',
    'Cibetková káva'
);

A tak ďalej. Už stačí volať iba tú funkciu

Nahlásit jako SPAM
IP: 78.98.120.–
Javascript (ES5, ES6+) / Typescript Developer, Vanilla Front-end ninja, HTML, CSS specialist

Hlúpa otázka vzniká ako reakcia na nedostatok relevantných informácií.
czsars0
Newbie
5. 2. 2023   #14
-
0
-

#13 weroro
Dobře, moc děkuju!

Nahlásit jako SPAM
IP: 2a02:768:b53d:516a:78d5:2dda:2cb3:ba8a...–
Zjistit počet nových příspěvků

Přidej příspěvek

Toto téma je starší jak čtvrt roku – přidej svůj příspěvek jen tehdy, máš-li k tématu opravdu co říct!

Ano, opravdu chci reagovat → zobrazí formulář pro přidání příspěvku

×Vložení zdrojáku

×Vložení obrázku

Vložit URL obrázku Vybrat obrázek na disku
Vlož URL adresu obrázku:
Klikni a vyber obrázek z počítače:

×Vložení videa

Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.
×
 
Podporujeme Gravatara.
Zadej URL adresu Avatara (40 x 40 px) nebo emailovou adresu pro použití Gravatara.
Email nikam neukládáme, po získání Gravatara je zahozen.
-
Pravidla pro psaní příspěvků, používej diakritiku. ENTER pro nový odstavec, SHIFT + ENTER pro nový řádek.
Sledovat nové příspěvky (pouze pro přihlášené)
Sleduj vlákno a v případě přidání nového příspěvku o tom budeš vědět mezi prvními.
Reaguješ na příspěvek:

Uživatelé prohlížející si toto vlákno

Uživatelé on-line: 0 registrovaných, 8 hostů

 

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032024 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý