Сначала на странице есть текстовое поле ввода, нажмите кнопку публикации и список смайликов.
Список смайликов на самом деле состоит из каждой картинки вместо смайликов.Здесь я использовал шесть картинок вместо шести смайликов.
Щелчок по каждому отдельному пакету выражений добавит соответствующий пакет выражений с атрибутами в поле ввода, например [стоя на коленях]
Затем, когда вы нажмете, чтобы опубликовать, выполните регулярное сопоставление каждого атрибута пакета смайликов и замените его соответствующим путем к изображению.
Здесь я столкнулся с проблемой, как сохранить пробел новой строки в поле ввода текста,
Я подумал о сопоставлении символов новой строки и пробелов с регулярными выражениями, а затем их замене.Позже я обнаружил, что есть свойство css, которое особенно легко использовать white-space:pre
Я думаю, что свойство white-space css очень полезно, я раньше не обращал на него особого внимания, но я просто использую его здесь.
Пустое пространство: стандартные значения по умолчанию, пробел будет игнорироваться браузером.
Обычный представляет пространство слияния, несколько смежных пространств объединяются в пространство, а перенос в исходном коде используется в качестве обработки пространства, и выполняется только автоматический перенос в соответствии с размером контейнера.
Пробел здесь представляет собой значение пустых символов, включая пробелы, такие как пробелы, табуляции и т. д. Для удобства представляет собой унифицированный «пробел».