Выбор информации по селектору

@Amadara · Регистрация: 17.12.2014

Author24 — интернет-сервис помощи студентам

Есть html

HTML5

<div class="price_byn">
    <div class="price">
        2<b class="f_normal">р.            </b>
        <span class="cent">49<b class="f_normal">к.</b></span>
        <div class="old_price">
            3
            <b class="f_normal">р.</b>
            <span class="cent">31<b class="f_normal">к.</b></span>
        </div>
    </div>
    <small class="kg">за 1 шт</small>
</div>

нужно выбрать все что в <div class="price"> кроме всего что в <div class="old_price">

у меня не получается

(
document.querySelector("div.products_card form.forms div.price_byn div.price:not(.old_price)").textContent;

@Mr_Sergo · 01.03.2019, 14:04

Amadara,

Можно так

Javascript

1
2
3

let price = document.querySelector('.price'), copy = price.cloneNode(true);
copy.querySelector('.old_price').remove();
console.log(copy);

@Qwerty_Wasd · 01.03.2019, 14:19

Mr_Sergo, здравствуй

Еще вариант, не создавая копии

Javascript

let res = '';
[...document.querySelector('.price_byn .price').childNodes].forEach((e, i) => {
  if (i < 4) res += e.textContent.trim();
});
console.log(res +  " " + document.querySelector('.price_byn .kg').textContent);

А вообще Вы, Amadara, сильно усложнили себе жизнь такой версткой. Но это так - ИМХО.

@FFPowerMan · 01.03.2019, 14:34

querySelector тут лучше не использовать, на мой взгляд. Лучше так:

Javascript

1	$('.price:not(.old_price)')

Через jQuery, соответственно.

@Qwerty_Wasd · 01.03.2019, 14:36

FFPowerMan, ну если уже подключена либа к проекту - да. А если нет - подключить только ради Вашей фантазии?

@FFPowerMan · 01.03.2019, 14:39

А что такого?

@Amadara · 01.03.2019, 14:43 **[ТС]**

Сообщение от FFPowerMan

А что такого?

нет смысла подключать Jquery,

да и вообще думаю он умер: webpack+react+babel

да и выборщик jquery ничем не отличается от QuerySelector /ALL современного JS

Добавлено через 1 минуту

Сообщение от FFPowerMan

querySelector тут лучше не использовать, на мой взгляд. Лучше так:

Javascript

1	$('.price:not(.old_price)')

Через jQuery, соответственно.

Странный ответ, половина верная, половина нет

))

querySelector не подходит

), а вот querySelectorAll подходит

) осталось только придумаю селектор

), и проблема не решена

)

Javascript

1	Array.from(document.querySelectorAll("div.products_card form.forms div.price_byn div.price *:not(.old_price)")).map((e)=>console.log(e.textContent))

@Qwerty_Wasd · 01.03.2019, 14:51

Amadara, sorry, неверно перевел доку - поторопился.

@Amadara · 01.03.2019, 14:52 **[ТС]**

Сообщение от Qwerty_Wasd

Amadara, я не совсем уверен.... в курсе ли Вы, что по

Javascript

1	Array.from(document.querySelectorAll("div.products_card form.forms div.price_byn div.price *:not(.old_price)"))

Вы получите пустой массив при дереве

HTML5

<div class="price_byn">
    <div class="price">
        2<b class="f_normal">р.</b>
        <span class="cent">49<b class="f_normal">к.</b></span>
        <div class="old_price">
            3
            <b class="f_normal">р.</b>
            <span class="cent">31<b class="f_normal">к.</b></span>
        </div>
    </div>
    <small class="kg">за 1 шт</small>
</div>

?

почему??
ТОка nodetext не выдаст

Javascript

1	Array.from(document.querySelectorAll("div.products_card form.forms div.price_byn div.price>*:not(.old_price)")).map((e)=>console.log(e.textContent))

Array.from(document.querySelectorAll("div.products_card form.forms div.price_byn div.price>*:not(.old_price)")).map((e)=>console.log(e.textContent))
р. debugger eval code:1:122
49к. debugger eval code:1:122
Array [ undefined, undefined ]

@Qwerty_Wasd · 01.03.2019, 14:56

Amadara, да уже написал выше - прошу прощения

@Amadara · 01.03.2019, 14:59 **[ТС]**

Я начинаю думать что лучше регулярными выражениями распарсить

( результат "2р.49к. 3р.31к. "

Javascript

1 2	document.querySelector("div.products_card form.forms div.price_byn div.price").textContent "2р.49к. 3р.31к. "

@Qwerty_Wasd · 01.03.2019, 15:00

Вот это с понталыку сбило - скрин. Только если перечисление элементов, среди которых будет псевдо-элемент.

@Qwerty_Wasd · 01.03.2019, 15:04

Amadara,

Сообщение от Amadara

Я начинаю думать что лучше регулярными выражениями распарсить

лучше этого не делать. Парсить просто текст регулярками или небольшой участок дерева - это одно. Весь DOM шерстить ими..... фу фу фу так делать. Да и медленно.
Проще переверстать само поддерево. Тогда и обращение к нему будет легким.

@Amadara · 01.03.2019, 15:09 **[ТС]**

Сообщение от Qwerty_Wasd

Amadara, лучше этого не делать. Парсить просто текст регулярками или небольшой участок дерева - это одно. Весь DOM шерстить ими..... фу фу фу так делать. Да и медленно.
Проще переверстать само поддерево. Тогда и обращение к нему будет легким.

тут обратная проблема, я паршу другой сайт при помощи c# AngleSharp, порлучив нужный DIV я могу в c# сделать с ним то тчо захочу

))
но мне не хочется клепать отдельный метод

(

p.s
ПОлучается по тексту что

elementList = document.querySelectorAll(selectors);

где

elementList - статическая коллекция элементов.
selectors - строка, содержащая, через запятую, один или более CSS селектор.

Возвращаемый NodeList содержит все элементы в пределах документа, которые соответствуют любому из указанных селекторов. Если строка selectors содержит CSS псевдо-элемент, в elementList ничего не вернется.

https://developer.mozilla.org/... electorAll

но на деле возвращает

)

Javascript

let a = Array.from(document.querySelectorAll("div.products_card form.forms div.price_byn div.price>*:not(.old_price)"))
undefined
a
(2) […]

0: <b class="f_normal">
1: <span class="cent">

length: 2

<prototype>: [

@amr-now · 01.03.2019, 15:14

Всем доброго начала весны!
Если задача выбрать именно текст, а не элементы, то прямой ответ:

Javascript

        let price = document.querySelector(".price"),
            old_price = document.querySelector(".old_price"),
            iterator = document.createNodeIterator(price, 4),
            node, s = "";
        while (node = iterator.nextNode()) {
            if (!old_price.contains(node))
                s += node.nodeValue;
        }
        console.log(s.trim().replace(/\s+/g, " "));

В s хранится грязная конкатенация текстовых узлов.
Естественное желание разработчика - привести s в более вменяемый вид.

@Qwerty_Wasd · 01.03.2019, 15:26

Сообщение от Amadara

но на деле возвращает )

вот и Вы попались как и я

HTML5

1 2	<div class="test">1</div> <div class="test">2</div>

CSS

1
2
3

.test:first-child:after {
    content: "a";
}

https://jsfiddle.net/Qwerty_Wasd/z8rbg0he/

Javascript

1	console.log(document.querySelectorAll('.test, .test:after'));

он игнорирует псевдо-элементы.

@Amadara · 01.03.2019, 15:32 **[ТС]**

Сообщение от Qwerty_Wasd

вот и Вы попались как и я

HTML5

1 2	<div class="test">1</div> <div class="test">2</div>

CSS

1
2
3

.test:first-child:after {
    content: "a";
}

https://jsfiddle.net/Qwerty_Wasd/z8rbg0he/

Javascript

1	console.log(document.querySelectorAll('.test, .test:after'));

он игнорирует псевдо-элементы.

ахаха да лох я попался

) :not это псевдокласс , а не псевдоэлемент

))

селектор "div.products_card form.forms div.price_byn div.price>*:not(.old_price)" удаляет .old_price, и выдает почти верный результат, но без текстового узла.

Javascript

c = Array.from(document.querySelectorAll("div.products_card form.forms div.price_byn div.price>*:not(.old_price)")).map((e)=>e.textContent)
(2) […]

0: "р."

1: "49к."

length: 2

<prototype>: Array []

@Mr_Sergo · 01.03.2019, 15:33

Amadara, вы хотите на выходе получить только текст или элементы?

@Amadara · 01.03.2019, 15:38 **[ТС]**

Сообщение от Mr_Sergo

Amadara, вы хотите на выходе получить только текст или элементы?

я получаю на выходе такой результат

HTML5

<div class="price_byn">
    <div class="price">
        2<b class="f_normal">р.            </b>
        <span class="cent">49<b class="f_normal">к.</b></span>
        <div class="old_price">
            3
            <b class="f_normal">р.</b>
            <span class="cent">31<b class="f_normal">к.</b></span>
        </div>
    </div>
    <small class="kg">за 1 шт</small>
</div>

Цена 2р.49к. 3р.31к.
Цена без скидки 3р.31к.

мне нужно

Цена 2.49
Цена без скидки 3.31.

@Mr_Sergo · 01.03.2019, 15:46

Сообщение от Amadara

мне нужно
Цена 2.49
Цена без скидки 3.31.

Наверное вы меня не поняли. Вы что планируете делать с полученным результатом дальше? Будете его выводить на страницу как html-разметку или вам нужно тупо текстовое содержимое, например, записать в БД без всяких тегов? или еще что-то сделать...

@Qwerty_Wasd dev - investigator 2151 / 1496 / 651 Регистрация: 16.04.2016 Сообщений: 3,696
	01.03.2019, 14:56	10
	Amadara, да уже написал выше - прошу прощения 1

@Qwerty_Wasd dev - investigator 2151 / 1496 / 651 Регистрация: 16.04.2016 Сообщений: 3,696
	01.03.2019, 15:04	13
	Amadara, Сообщение от Amadara Я начинаю думать что лучше регулярными выражениями распарсить лучше этого не делать. Парсить просто текст регулярками или небольшой участок дерева - это одно. Весь DOM шерстить ими..... фу фу фу так делать. Да и медленно. Проще переверстать само поддерево. Тогда и обращение к нему будет легким. 0

@Mr_Sergo 2035 / 1094 / 409 Регистрация: 29.04.2016 Сообщений: 2,625
	01.03.2019, 15:33	18
	Amadara, вы хотите на выходе получить только текст или элементы? 1

@Qwerty_Wasd dev - investigator 2151 / 1496 / 651 Регистрация: 16.04.2016 Сообщений: 3,696
	01.03.2019, 14:36	5
	FFPowerMan, ну если уже подключена либа к проекту - да. А если нет - подключить только ради Вашей фантазии? 2

@FFPowerMan 2125 / 1207 / 503 Регистрация: 11.10.2018 Сообщений: 6,088
	01.03.2019, 14:39	6
	А что такого? 1

@Qwerty_Wasd dev - investigator 2151 / 1496 / 651 Регистрация: 16.04.2016 Сообщений: 3,696
	01.03.2019, 14:51	8
	Amadara, sorry, неверно перевел доку - поторопился. 1

@Qwerty_Wasd dev - investigator 2151 / 1496 / 651 Регистрация: 16.04.2016 Сообщений: 3,696
	01.03.2019, 15:00	12
	Вот это с понталыку сбило - скрин. Только если перечисление элементов, среди которых будет псевдо-элемент. Миниатюры 1

@Mr_Sergo 2035 / 1094 / 409 Регистрация: 29.04.2016 Сообщений: 2,625
	01.03.2019, 15:46	20
	Сообщение от Amadara мне нужно Цена 2.49 Цена без скидки 3.31. Наверное вы меня не поняли. Вы что планируете делать с полученным результатом дальше? Будете его выводить на страницу как html-разметку или вам нужно тупо текстовое содержимое, например, записать в БД без всяких тегов? или еще что-то сделать... 1

Выбор информации по селектору

Решение