Замена блочных элементов на переносы

@Retyrn0 · Регистрация: 24.06.2013

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

Здравствуйте! Пишу редактор сообщений со смайлами и т.д. Проблема со вставкой текста. Захожу в ВК, выделяю всё и копирую, потом вставляю в свой div contenteditable и естественно получаю вёрстку. Ок. При onpaste очищаю теги через регулярку

JavaScript
1
t.innerHTML=t.innerHTML.replace(/<[^>]+>/g,'');

, все теги убираются и вообще всё хорошо, кроме, конечно же переносов строк.
Конечная цель: если вставлять то же самое в textarea, то он как-то всё это дело фильтрует внутри и вставляется всё с переносами - безупречно. Как мне симитировать то же самое для div contenteditable? Пока только вижу выход в проверке по думу всех возможных блочных элементов с дописыванием \n в нужном месте, но этих элементов много, а я один. Есть ли какая-то готовая функция? Может она в сам яваскрипт вшита, но я не в курсе?
Пробовал обмануть судьбу - вставлял хтмл во временный текстареа и дёргал обратно текст - не сработало, видимо эта обработка только при пользовательской вставке происходит =/

@BANO · 14.06.2016, 16:36

Retyrn0, а почему бы просто не взять, вставить сначала в какой-то невидимый элемент, а потом из него дёрнуть текст? ну через textContent

@Retyrn0 · 14.06.2016, 16:45 **[ТС]**

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

ну через textContent

Который вернёт то же, что при очистке от тегов - переносы строк не сохраняются

@BANO · 14.06.2016, 16:49

Retyrn0, хм, я помню что либо innerText, либо textContent делает переносы

а вспомнил, он br заменяет на переносы

ну что я могу сказать, у вас при копировании копируется html код или текст?

@Retyrn0 · 14.06.2016, 16:59 **[ТС]**

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

у вас при копировании копируется html код или текст?

Обычный div contenteditable - в него, в отличии от textarea копируется всё подряд. То есть вместе с вёрсткой. Я реализовал так, что перед вставкой создаётся textarea, туда фокусируется и текст вставляется в него, а потом дёргал value textarea и вставлял в див, но тогда беда с ctrl+z - браузер не считает программную вставку шагом редактирования =(

@BANO · 14.06.2016, 17:02

Retyrn0, у этого форума такая же проблема с ctrl + z
ну, я не знаю как вам тогда помочь, может тогда создавать полностью свой рендер html в текст с переносами?

@Retyrn0 · 14.06.2016, 17:17 **[ТС]**

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

может тогда создавать полностью свой рендер html в текст с переносами?

Это было второй, что мне пришло в голову, но довольно запутанная задачка, да и думал, что этот велосипед уже написан и меня ткнут носом в какую-то простую реализацию - хотел сэкономить время) Может есть у кого-то какие мысли? Все теги не хотелось бы обрабатывать..

@BANO · 14.06.2016, 17:31

Retyrn0, не, я не помню таких готовых реализаций... извини

@Retyrn0 · 14.06.2016, 17:51 **[ТС]**

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

я не помню таких готовых реализаций... извини

Ничего, буду значит сам парсить дум дерево..а есть возможность не проверять все возможные элементы, а определять блочный ли он(переносится ли он). Вопрос уже в другую тему, но объяснять заново задачу..

@BANO · 14.06.2016, 17:57

Retyrn0, а вопрос уже другой
"Как отличить блочный элемент от инлайнового"

Добавлено через 3 минуты
Retyrn0, что-то ты мне тут загнал горячку
я же говорил textContent
вот даже пример

@Retyrn0 · 14.06.2016, 19:56 **[ТС]**

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

я же говорил textContent
вот даже пример

На всякий случай перепроверил. К сожалению нет. textContent возвращает текст за вычетом тегов. Всё бы ничего, но когда стоит блочный элемент, то он переносится - визуально будто это перенос строки, но самого символа "\n" там нет - это вёрстка. Так вот innerContent не вставляет переносы строк в местах блочных элементов. Вот в этом и беда..

Добавлено через 1 минуту
*Действует равносильно .replace(/<[^>]+>/g,'');

@BANO · 14.06.2016, 20:21

Retyrn0, врёшь ты всё, переносит он блочные элементы, причём спокойно и именно \n и вставляет
вот только сейчас проверил на блоке твоего поста, на 136 позиции стоит перенос строки
так что не надо тут заливать
блочные он спокойно переносит, вон у нас оказывается "[ТС]" является блочным, хотя он является <b>...

@Retyrn0 · 14.06.2016, 22:03 **[ТС]**

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

врёшь ты всё

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<html>
    <head>
        <style type="text/css">
            #edit{width:600px;min-height:40px;margin:auto;outline:none;border:1px solid #ccc;}
        </style>
    </head>
    <body>
        <div id="edit" contenteditable="true"></div>
    </body>
    <script type="text/javascript">
        (function(){
            var edit=document.getElementById('edit');
            edit.onpaste=function(e) {
                var t=this;
                setTimeout(function(){
                    t.innerHTML=t.textContent.replace(/\r\n|\r|\n/g,'<br>');
                },0);
            };
        })();
    </script>
</html>

При вставке я заменяю innerHTML на textContent, с заменой \n на <br>, чтобы переносы отобразились внутри дива. Может какие-то элементы и заменяются на перенос, но те же дивы просто съедаются.

@BANO · 14.06.2016, 22:11

Retyrn0, раз тебе не нравится, то можно самому писать парсер
я готовых не видел, так что извени

@Retyrn0 · 14.06.2016, 22:20 **[ТС]**

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

раз тебе не нравится

Если бы прото не нравилось, но оно немного не то делает, чем задача стоит) Да придётся писать, спасибо большое за попытку помочь!

@BANO · 14.06.2016, 22:26

Retyrn0, эх, жаль что помочь не смог

Новые блоги и статьи Все статьи Все блоги /
http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь(не выше 3-го порядка) постоянного тока с элементами R, L, C, k(ключ), U, E, J. Программа находит переходные токи и напряжения на элементах схемы классическим методом(1 и 2 з-ны. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .
Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .

@BANO Ренегат 1740 / 1085 / 386 Регистрация: 06.08.2014 Сообщений: 5,203 Записей в блоге: 1
	14.06.2016, 16:36
	Retyrn0, а почему бы просто не взять, вставить сначала в какой-то невидимый элемент, а потом из него дёрнуть текст? ну через textContent 0

@BANO Ренегат 1740 / 1085 / 386 Регистрация: 06.08.2014 Сообщений: 5,203 Записей в блоге: 1
	14.06.2016, 16:49
	Retyrn0, хм, я помню что либо innerText, либо textContent делает переносы а вспомнил, он br заменяет на переносы ну что я могу сказать, у вас при копировании копируется html код или текст? 0

@BANO Ренегат 1740 / 1085 / 386 Регистрация: 06.08.2014 Сообщений: 5,203 Записей в блоге: 1
	14.06.2016, 17:02
	Retyrn0, у этого форума такая же проблема с ctrl + z ну, я не знаю как вам тогда помочь, может тогда создавать полностью свой рендер html в текст с переносами? 0

@BANO Ренегат 1740 / 1085 / 386 Регистрация: 06.08.2014 Сообщений: 5,203 Записей в блоге: 1
	14.06.2016, 17:31
	Retyrn0, не, я не помню таких готовых реализаций... извини 0

@BANO Ренегат 1740 / 1085 / 386 Регистрация: 06.08.2014 Сообщений: 5,203 Записей в блоге: 1
	14.06.2016, 17:57
	Retyrn0, а вопрос уже другой "Как отличить блочный элемент от инлайнового" Добавлено через 3 минуты Retyrn0, что-то ты мне тут загнал горячку я же говорил textContent вот даже пример 0

@BANO Ренегат 1740 / 1085 / 386 Регистрация: 06.08.2014 Сообщений: 5,203 Записей в блоге: 1
	14.06.2016, 20:21
	Retyrn0, врёшь ты всё, переносит он блочные элементы, причём спокойно и именно \n и вставляет вот только сейчас проверил на блоке твоего поста, на 136 позиции стоит перенос строки так что не надо тут заливать блочные он спокойно переносит, вон у нас оказывается "[ТС]" является блочным, хотя он является <b>... 0

@BANO Ренегат 1740 / 1085 / 386 Регистрация: 06.08.2014 Сообщений: 5,203 Записей в блоге: 1
	14.06.2016, 22:11
	Retyrn0, раз тебе не нравится, то можно самому писать парсер я готовых не видел, так что извени 0

@BANO Ренегат 1740 / 1085 / 386 Регистрация: 06.08.2014 Сообщений: 5,203 Записей в блоге: 1
	14.06.2016, 22:26
	Retyrn0, эх, жаль что помочь не смог 0