Как отменить действие br, перенос строки?
Вложений: 1
Здравствуйте!
Получаю текст из div, где применен тег <br />, и в alert текст подает с переносом строки. Скажите, пожалуйста, можно ли убрать этот перенос? |
qwerty<br />asdfgh
<script>
alert('qwerty<br />asdfgh')
</script>
В alert тег BR будет воспринят обычным текстом и никакого переноса не будет. У вас какая-то пользовательская плюшка выводящая сообщения, которая может отображать и html, поэтому вы и наблюдаете это. А чтобы отменить, нужно удалять тег BR из текста. |
А как удалить тег br?
|
Если у вас все работает на jQery, то можно взять просто текст, при этом теги будут вырезаны (1). То есть не только BR, а все имеющиеся. Если другие теги нужно сохранить, значит берем html и рег. выражением вырезаем только нужное (2).
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</head>
<body>
<p id="a">Text <b>text</b> <br/> text</p>
<p id="b"></p>
<p id="c"></p>
<script>
$('#b').html($('#a').text());
$('#c').html($('#a').html().replace(/<br.?>/g, ''));
</script>
</body>
</html>
PS. Если не JQ и все теги не нужны, то тоже самое будет
document.querySelector('#b').textContent = document.querySelector('#a').textContent;
|
Цитата:
Вот, можно здесь посмотреть: https://jsfiddle.net/qfet2z6j/2/ |
Ваша структура может быть какая угодно, мне же откуда ее знать. :) Поэтому я и пишу пример, в котором ключевое, это textContent. По ссылке тоже самое, только все полученное (только текст) помещается в массив.
|
|
Цитата:
Вот так у меня по одной букве выводится:
for (var l = 0; l < countPeople.length; l++) {
console.log("countPeople "+countPeople[l] );
}
|
Вот тут я не знаю чего вы хотите получить от массива, тем более countPeople, которого по ссылке не видно.
|
Цитата:
|
В данном случае (alert) вы видите перенос потому, что в тексте есть ASCII коды переноса строк (\r\n), и они будут работать в сообщении. Если же этот текст вывести на странице, то они будут игнорированы и переноса не будет. Вы чего хотите?
|
Цитата:
<!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>
|
поиск текстовых узлов в элементе
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>
|
Цитата:
А еще лучше, если бы можно было разделить стоку на два вывода: Кол-во отдыхающих: 2 взрослых 7 дней 7 ночей
<div class="count-people">
<span>Кол-во отдыхающих:</span>
2 взрослых
<br>
7 дней 7 ночей
</div>
|
Цитата:
Цитата:
|
Ну так текст взятый из элемента 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 не помешает? |
DDim1000,
погодите, а вы во что вообще собираетесь выводить на странице, именно в alert поэтому и боретесь с BR? |
Цитата:
<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>
|
DDim1000,
кажется я начинаю догадываться, это вы все о приложении которое пишите в Delphi? |
Цитата:
|
В пост #13 один вывод, просто с переносом строки. А можно ли сделать вывод в два alert?
|
Цитата:
alert(`${str} ${count}`);
alert(`${time}`);
|
Цитата:
Я получаю с сайта данные и заношу их в StringGrid, и мне нужно разделить строку, и внести в разные ячейки StringGrid. |
Цитата:
|
Цитата:
|
Цитата:
Вот только на эти строки, почему то, ругается:
var [str, count, time] = textNode(elem);
var [str, count, time] = textNode(elem);
Пишет: Uncaught SyntaxError: Unexpected token [. Не знаю в чем причина... А так, код от рони работает! Спасибо! |
Цитата:
alert('string 1 string 2');
alert('string 3')
|
DDim1000,
var ar = textNode(elem);
var time = ar.pop();
var count = ar.join(" ");
alert(count);
alert(time);
|
Цитата:
|
То есть то что в первом посте показано (на рисунке), этого тоже не будет, это тоже чисто для контроля пример?
|
Да.
|
| Часовой пояс GMT +3, время: 02:43. |