23.05.2020, 09:56
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
|
В данном случае (alert) вы видите перенос потому, что в тексте есть ASCII коды переноса строк (\r\n), и они будут работать в сообщении. Если же этот текст вывести на странице, то они будут игнорированы и переноса не будет. Вы чего хотите?
|
|
23.05.2020, 09:58
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
|
Сообщение от DDim1000
|
|
Вот новая ссылка
|
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="item-tour-pay-list">
<div class="img-tour-item">
<a href="https://dreams-fly.ru/tour/157360" class="pay-popup">
<img src="https://www.tui.ru/CmsPages/GetPhoto.aspx?fileguid=135c51bd-2a3e-483d-a596-1be3ba48f5c5&width=400&height=300">
</a>
</div>
<div class="item-tour-pay-inform">
<div class="item-rang-tour">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
<div class="item-tour-title-block">
<a href="https://dreams-fly.ru/tour/157360" class="pay-popup">
<h2>Hilton Bali Resort</h2>
</a>
<small>Индонезия/Бали/Нуса Дуа</small>
</div>
<div class="block-side">
<div class="left-side-tour-item">
<div class="domination-tour">
<div class="item-domin">
Wi-Fi
</div>
<div class="item-domin">
Открытый бассейн
</div>
<div class="item-domin">
Первая линия пляжа
</div>
<div class="item-domin">
Теннис
</div>
<div class="item-domin">
SPA
</div>
<div class="item-domin">
Детский клуб
</div>
<div class="item-domin">
Размещение 2+2
</div>
</div>
<div class="count-people">
<span>Кол-во отдыхающих:</span>
2 взрослых
<br>
7 дней 7 ночей
</div>
<div class="raiting-tour">
<span>Рейтинг TripAdvisor </span>
<span class="rait-items">
<img src="/images/tadvisor.png" class="no-copy" alt="">
<i class="far fa-dot-circle"></i>
<i class="far fa-dot-circle"></i>
<i class="far fa-dot-circle"></i>
<i class="far fa-dot-circle"></i>
<i class="far fa-circle"></i>
</span>
</div>
<div class="count-comm">
Основано на 2865 отзывах
</div>
</div>
<div class="right-sid-tour">
<div class="price-block">
<div class="price">$2316.00</div>
</div>
<a href="https://dreams-fly.ru/user/cart/add-item/157360" class="btn btn-pay">Бронировать</a>
</div>
</div>
</div>
</div>
<script>
var people = document.querySelectorAll(".item-tour-pay-list .count-people");
for (var {textContent} of people) {
var countPeople = textContent.replace(/\s+/mig, " ").trim();
alert("countPeople "+countPeople )
};
</script>
</body>
</html>
Последний раз редактировалось рони, 23.05.2020 в 10:10.
|
|
23.05.2020, 10:15
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
|
поиск текстовых узлов в элементе
DDim1000,
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="item-tour-pay-list">
<div class="img-tour-item">
<a href="https://dreams-fly.ru/tour/157360" class="pay-popup">
<img src="https://www.tui.ru/CmsPages/GetPhoto.aspx?fileguid=135c51bd-2a3e-483d-a596-1be3ba48f5c5&width=400&height=300">
</a>
</div>
<div class="item-tour-pay-inform">
<div class="item-rang-tour">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
<div class="item-tour-title-block">
<a href="https://dreams-fly.ru/tour/157360" class="pay-popup">
<h2>Hilton Bali Resort</h2>
</a>
<small>Индонезия/Бали/Нуса Дуа</small>
</div>
<div class="block-side">
<div class="left-side-tour-item">
<div class="domination-tour">
<div class="item-domin">
Wi-Fi
</div>
<div class="item-domin">
Открытый бассейн
</div>
<div class="item-domin">
Первая линия пляжа
</div>
<div class="item-domin">
Теннис
</div>
<div class="item-domin">
SPA
</div>
<div class="item-domin">
Детский клуб
</div>
<div class="item-domin">
Размещение 2+2
</div>
</div>
<div class="count-people">
<span>Кол-во отдыхающих:</span>
2 взрослых
<br>
7 дней 7 ночей
</div>
<div class="raiting-tour">
<span>Рейтинг TripAdvisor </span>
<span class="rait-items">
<img src="/images/tadvisor.png" class="no-copy" alt="">
<i class="far fa-dot-circle"></i>
<i class="far fa-dot-circle"></i>
<i class="far fa-dot-circle"></i>
<i class="far fa-dot-circle"></i>
<i class="far fa-circle"></i>
</span>
</div>
<div class="count-comm">
Основано на 2865 отзывах
</div>
</div>
<div class="right-sid-tour">
<div class="price-block">
<div class="price">$2316.00</div>
</div>
<a href="https://dreams-fly.ru/user/cart/add-item/157360" class="btn btn-pay">Бронировать</a>
</div>
</div>
</div>
</div>
<script>
function textNode(elem) {
for (var txt, node, temp = [], textNodes = document.createTreeWalker(elem, NodeFilter.SHOW_TEXT, null, false); node = textNodes.nextNode();) {
txt = node.nodeValue.trim();
txt && (txt = txt.replace(/\s+/mig, " "), temp.push(txt))
}
return temp
}
var people = document.querySelectorAll(".item-tour-pay-list .count-people");
for (var elem of people) {
var [str, count, time] = textNode(elem);
alert(`${str} ${count}\n${time}`)
};
</script>
</body>
</html>
Последний раз редактировалось рони, 23.05.2020 в 11:46.
|
|
23.05.2020, 11:07
|
|
Профессор
|
|
Регистрация: 20.10.2016
Сообщений: 223
|
|
Сообщение от laimas
|
|
... Вы чего хотите?
|
Мне нужен вывод в одной строкой: Кол-во отдыхающих: 2 взрослых 7 дней 7 ночей
А еще лучше, если бы можно было разделить стоку на два вывода:
Кол-во отдыхающих: 2 взрослых
7 дней 7 ночей
<div class="count-people">
<span>Кол-во отдыхающих:</span>
2 взрослых
<br>
7 дней 7 ночей
</div>
|
|
23.05.2020, 11:42
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
|
Сообщение от DDim1000
|
|
Мне нужен вывод в одной строкой
|
пост #12
|
Сообщение от DDim1000
|
|
А еще лучше, если бы можно было разделить стоку на два вывода:
|
пост #13 |
|
23.05.2020, 11:53
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
Ну так текст взятый из элемента count-people и выдаст нужное:
<div class="count-people">
<span>Кол-во отдыхающих:</span>
2 взрослых
<br>
7 дней 7 ночей
</div>
<p id="a"></p>
<script>
document.querySelector("#a").textContent = document.querySelector(".count-people").textContent;
</script>
В alert же все будет отображаться не в одну строку только потому, что и все пробелы и прочее будет учтено при выводе.
Можно перед получением текста заменить <br> на какой либо символ, затем в полученном тексте заменить его опять на <br> и помещать в приемник как html.
PS. Можете взять сразу как html, элемент span не помешает?
Последний раз редактировалось laimas, 23.05.2020 в 11:57.
|
|
23.05.2020, 12:02
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
|
DDim1000,
погодите, а вы во что вообще собираетесь выводить на странице, именно в alert поэтому и боретесь с BR?
|
|
23.05.2020, 12:17
|
 |
Профессор
|
|
Регистрация: 20.12.2009
Сообщений: 1,714
|
|
|
Сообщение от laimas
|
|
В alert же все будет отображаться не в одну строку только потому, что и все пробелы и прочее будет учтено при выводе.
|
Какой баг)) Вот исправил — white-space: pre; — Проверь!
<div class="count-people">
<span>Кол-во отдыхающих:</span>
2 взрослых
<br>
7 дней 7 ночей
</div>
<p id="a" style="white-space: pre;"></p>
<script>
document.querySelector("#a").textContent = document.querySelector(".count-people").textContent;
</script>
|
|
23.05.2020, 12:19
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
|
DDim1000,
кажется я начинаю догадываться, это вы все о приложении которое пишите в Delphi?
|
|
23.05.2020, 12:46
|
|
Профессор
|
|
Регистрация: 20.12.2009
Сообщений: 1,714
|
|
|
Сообщение от DDim1000
|
|
Мне нужен вывод в одной строкой: Кол-во отдыхающих: 2 взрослых 7 дней 7 ночей
|
DDim1000, вам нужно в вашем примере https://jsfiddle.net/qfet2z6j/3/ заменить textContent на innerText |
|
|
|
