Вставка смайликов в div с помощью jQuery

ProgramBox

Вставка смайликов в div с помощью jQuery

Post author:admin
Запись опубликована:27 апреля, 2023
Post category:Вопросы по программированию

#javascript #jquery #html #emoticons

#javascript #jquery #HTML #смайлики

Вопрос:

Я работаю над каким-то небольшим приложением для чата. Я хочу реализовать смайлики там, чтобы, когда я нажимаю на какой-нибудь смайлик, он появлялся в текстовой области, где пользователь вводит свое сообщение, и когда пользователь нажимает на select, я хочу, чтобы смайлики появлялись в div, который содержит диалог.

После некоторых обходных путей я пришел к мысли, что замена textarea на div contenteditable = «true» работает не так хорошо, поэтому я заключил определенное имя смайлика в ‘:’, например:wink: в textarea, но все же мне нужно заменить:wink: на real span, содержащий изображение в качестве фона.

Проблема в том, что я не вижу способа сделать это динамически, но выполняю каждый смайлик по одному.

например:

         if ($('.line:contains(":wink:")').length > 0) {
            var oldLineHTML = $('.line:contains(":wink:")').html();
            $('.line:contains(":wink:")').html(oldLineHTML.replace(/:wink:/gi, '<span class="wink></span>"'));

У меня много смайликов, поэтому выполнение этой очень ресурсоемкой функции обойдется мне дорого, а также вызовет множество проблем при обслуживании.

Как я могу сделать это динамически? Или, может быть, у вас есть лучшее решение, которое потребует переделки… Я готов к этому, если это требуется.

спасибо }

1. Вы выполняете эту операцию при загрузке страницы или когда они вводят текст?

2. Кроме того, вы упоминаете, что хотите заменить подмигивание в текстовой области. Я не думаю, что вы можете поместить html и отобразить его (иначе говоря, не обычный текст) внутри текстовой области.

3. @hivie7510, у меня изображения отображаются не только в div-окне чата. Я имел в виду, что мне не повезло работать с <div contenteditable=»true»></div> вместо textarea, который настолько испортил CSS внутри этого div, что я выбросил его.

Ответ №1:

 var testString = "test1 :smile: test2 :wink:";
alert(testString.replace(/:([^:]*):/g, '<span class="$1"></span>'));

1. вот о чем я говорю! 1 для вас 🙂

2. Чем это отличается от кода, который он представил в своем вопросе? Не является $(‘.line:содержит(«:wink:»)’).html(oldLineHTML.replace(/:wink:/gi, ‘<span class=»wink></span>»‘)); такой же, как testString.replace(/:([^:]*):/ g, ‘<span class=»$ 1″></span>’). Я предполагаю, что в этом есть динамика, потому что это не заботится о подмигивании, только о содержимом между ::’s .

3. @hivie7510: Действительно. Его проблема заключалась в том, что ему приходилось искать точную строку и заменять точную строку статической предопределенной строкой, которую сложнее поддерживать, когда вы получаете много смайликов.

4. Спасибо Dvir, попробую это,,, похоже, это то, что я искал, потому что никогда не хотел возиться с массивом смайликов, а регулярные выражения находятся далеко за пределами моего понимания.

5. @hivie7510 с сообщением @Dvir мне не нужно проверять, содержит ли div что-либо, а просто применить регулярное выражение. Конечно, будут некоторые потери в div, где нет :somesmilie: при сканировании с помощью replace(), но все же это намного проще поддерживать.

Ответ №2:

Я предлагаю прочитать каждую строку, которая заключена в двоеточия :[something]: , затем преобразовать ее в span. Так что вам не нужно определять каждую улыбку, и ее легко поддерживать.

Ответ №3:

Если вы делаете это при загрузке страницы, то вы можете сделать это в $ (document).готово(). Затем вы можете использовать имеющийся у вас селектор $(‘.line:contains(«:wink:»)’) и использовать оператор $each для перебора каждого из них и выполнения обновления. Это покроет расходы на загрузку страницы. Но если вы преобразуете этот код $each в метод, то сможете вызывать его каждый раз, когда текст обновляется. Я думаю, это даст вам лучшее в обоих случаях. Что-то вроде этого:

 function replaceWinks(){
$('.line:contains(":wink:")').each(function(index) {
    //Replace the wink here
  });
}

$(document).ready(function(){
replaceWinks();
});

Однако я бы рекомендовал заменить серверную часть winks для загрузки страницы. Это будет более эффективно. Также это позволит избежать содержимого, которое изменяется после первого просмотра.

1. Я использую чат без перезагрузки страницы, и я хочу отправлять как можно меньше данных через json. Я думаю, что преобразование сервером 😉 в <span class=»wink»></span> займет больше времени, чем использование встроенного jQu ery… Спасибо за информацию, хотя/

Ответ №4:

Идея Джеффри Гилберта хороша, но у меня есть еще одна, которая может оказаться интересной: запишите ваши подмигивания так, как вы хотите (скажем, [SmileName]), и при обработке текста с помощью jquery прочитайте каждый из них и замените [ на <div class=" , затем замените ] знак на "></div> , таким образом, у вас получится вот так:

использование этих смайликов:

1- [улыбка]

2- [подмигивание]

3- [стесняется]

приведет к следующей разметке

1- <div class="smile"></div>

2- <div class="wink"></div>

3- <div class="shy"></div>

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

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

1. для смайликов (особенно на форуме) обычно используется двоеточие в качестве оболочки.

2. Он эффективно делает это сейчас, он заменяет 😉 на span, классом которого является wink .