Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 23.05.2020, 09:56
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,096

В данном случае (alert) вы видите перенос потому, что в тексте есть ASCII коды переноса строк (\r\n), и они будут работать в сообщении. Если же этот текст вывести на странице, то они будут игнорированы и переноса не будет. Вы чего хотите?
Ответить с цитированием
  #12 (permalink)  
Старый 23.05.2020, 09:58
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,643

Сообщение от 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&amp;width=400&amp;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.
Ответить с цитированием
  #13 (permalink)  
Старый 23.05.2020, 10:15
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,643

поиск текстовых узлов в элементе
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&amp;width=400&amp;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.
Ответить с цитированием
  #14 (permalink)  
Старый 23.05.2020, 11:07
Профессор
Отправить личное сообщение для DDim1000 Посмотреть профиль Найти все сообщения от DDim1000
 
Регистрация: 20.10.2016
Сообщений: 184

Сообщение от laimas Посмотреть сообщение
... Вы чего хотите?
Мне нужен вывод в одной строкой: Кол-во отдыхающих: 2 взрослых 7 дней 7 ночей

А еще лучше, если бы можно было разделить стоку на два вывода:
Кол-во отдыхающих: 2 взрослых
7 дней 7 ночей

<div class="count-people">
                                                                <span>Кол-во отдыхающих:</span>
                                2 взрослых
                                
                                                                        <br>
                                    7 дней 7 ночей
                            </div>
Ответить с цитированием
  #15 (permalink)  
Старый 23.05.2020, 11:42
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,643

Сообщение от DDim1000
Мне нужен вывод в одной строкой
пост #12
Сообщение от DDim1000
А еще лучше, если бы можно было разделить стоку на два вывода:
пост #13
Ответить с цитированием
  #16 (permalink)  
Старый 23.05.2020, 11:53
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,096

Ну так текст взятый из элемента 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.
Ответить с цитированием
  #17 (permalink)  
Старый 23.05.2020, 12:02
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,096

DDim1000,
погодите, а вы во что вообще собираетесь выводить на странице, именно в alert поэтому и боретесь с BR?
Ответить с цитированием
  #18 (permalink)  
Старый 23.05.2020, 12:17
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,703

Сообщение от 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>
Ответить с цитированием
  #19 (permalink)  
Старый 23.05.2020, 12:19
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,096

DDim1000,
кажется я начинаю догадываться, это вы все о приложении которое пишите в Delphi?
Ответить с цитированием
  #20 (permalink)  
Старый 23.05.2020, 12:46
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,703

Сообщение от DDim1000
Мне нужен вывод в одной строкой: Кол-во отдыхающих: 2 взрослых 7 дней 7 ночей
DDim1000, вам нужно в вашем примере https://jsfiddle.net/qfet2z6j/3/ заменить textContent на innerText
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
tinymce как запретить перенос элементов?? spiritсашаspirit Элементы интерфейса 2 16.04.2016 19:05
Как отменить действие обработчика? goody-goody Общие вопросы Javascript 15 27.12.2015 19:41
как обратно включить действие по умолчанию, после e.preventDefault? Кирюха =) Events/DOM/Window 4 04.06.2015 15:32
Как передать данные в другую панель из выбранной строки таблицы. layout: 'card'. Пролетарий ExtJS 5 03.06.2015 22:53
Отправка формы по ENTER (ajax) и перенос строки VEGA jQuery 18 01.03.2013 12:09