Поделиться контентом в строке разрыва jquery WhatsApp
Это мой код для обмена содержимым веб-страницы в WhatsApp с помощью jquery. но внутри divblock3 есть текст с разрывами строк <br />
<div class='divblock3'><p><p>Lorem Ipsum is simply dummy .<br /> <br /> Lorem Ipsum is simply dummy textntly.<br /> <br /> Lorem Ipsum is simply dummy textntly.
WhatsApp не интерпретирует как разрыв строки...
любая идея, как заменить <br /> на "%0a", чтобы WhatsApp интерпретировал их как разрывы строк
<script type = "text/javascript">
(function clickMe() {
const button = document.getElementById("button");
var divblock1 = $('.divblock1').text();
var divblock2 = $('.divblock2').text();
var divblock3 = $('.divblock3').text();
var message = encodeURIComponent(divblock1)+" %0a "+encodeURIComponent(divblock2)+" %0a "+encodeURIComponent(divblock3);
button.addEventListener("click", event => {
// Whatsapp Message on Button Click
window.open("https://api.whatsapp.com/send?text = "+message)
});
})();
</script>У вас неверная структура html, вы не можете вкладывать теги p
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Функция JQuery replace может искать все экземпляры <br> и заменять их указанным значением. Также функция Jquery .text() удаляет все HTML-теги, но вы хотите сохранить их, потому что хотите заменить <br> на %0a. Поэтому давайте вместо этого используем функцию .html().
И я бы порекомендовал вам удалить / в <br />, в этом нет необходимости, иначе это вызовет проблемы с новым кодом.
Небольшое редактирование HTML, например
<div class='divblock3'>
Lorem Ipsum is simply dummy .<br> <br> Lorem Ipsum is simply dummy textntly.<br> <br> Lorem Ipsum is simply dummy textntly.
</div>
Новые строки в JS
var divblock3 = $('.divblock3').html();
divblock3 = divblock3.replace(/<br>/g, '\n');
divblock3 = $('<div></div>').html(divblock3);
divblock3 = divblock3.text();
Обновленный пример скрипта
(Сначала я не учитывал encodeURIComponent позже, он исправлен в этом обновлении с помощью \n вместо %0A)
function clickMe() {
const button = document.getElementById("button");
var divblock1 = $('.divblock1').text();
var divblock2 = $('.divblock2').text();
// the new lines
var divblock3 = $('.divblock3').html();
divblock3 = divblock3.replace(/<br>/g, '\n');
divblock3 = $('<div></div>').html(divblock3);
divblock3 = divblock3.text();
var message = encodeURIComponent(divblock1) + "%0A" + encodeURIComponent(divblock2) + "%0A" + encodeURIComponent(divblock3);
window.open("https://api.whatsapp.com/send?text = "+message, '_blank');
// and for debugging purposes you can copy this:
console.info("https://api.whatsapp.com/send?text = "+message);
}<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='divblock1'>
Subject: Strange text editor
</div>
<div class='divblock2'>
Department: IT
</div>
<div class='divblock3'>
Message: Every time I type somehting it turns to:<br><br>
Lorem Ipsum is simply dummy .<br> <br> Lorem Ipsum is simply dummy textntly.<br> <br> Lorem Ipsum is simply dummy textntly
</div>
<button onclick = "clickMe()">
Send message
</button>Это работает, но я думаю, что после замены <br>.. их нужно снова показать как текст...
Я обновил ответ. Я не учел encodeURIComponent. Теперь вместо замены <br> на %0A мы собираемся заменить его на '\n', что является командой UNIX для новой строки.
это работает отлично, но есть еще одна проблема, если в коде есть другая строка, например: <p></p> ... это появляется в сообщении
Хорошо, в таком случае. Сначала мы извлекаем содержимое из div. Затем замените <br> (мы уже сделали это) и теперь поместите замененный текст обратно в div, который мы создали с помощью jQuery. Затем из этого нового div мы используем функцию .text(), и она работает так же, как divblock1 и divblock2.
Вы пытались стилизовать свои элементы как элементы блочного уровня с помощью CSS?