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

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.

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

#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.

#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.

https://stackoverflow.com/questions/285522/find-html-label-associated-with-a-given-input  tady řeší podobný problém.

hu

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

#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!');

$('label[for="sendNewsletter"]').contents()[1].textContent = 'nazdar';

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

#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.

#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;
    }));
}

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>

#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

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