Вставка смайликов в div с помощью jQuery - PullRequest
Новая
       6

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

2 голосов
/ 05 июня 2011

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

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

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

например: 

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

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

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

спасибо }

Ответы [ 4 ]

3 голосов
/ 05 июня 2011 
var testString = "test1 :smile: test2 :wink:";
alert(testString.replace(/:([^:]*):/g, '<span class="$1"></span>'));
0 голосов
/ 05 июня 2011

Если вы делаете это при загрузке страницы, то вы можете сделать это в $ (document) .ready ().Затем вы можете использовать селектор, у которого есть $ ('. Line: contains (": wink:")'), и использовать оператор $ each, чтобы зациклить каждый из них и выполнить обновление.Это покроет вас для загрузки страницы.Но если вы реорганизуете каждый код в метод, вы можете вызывать его каждый раз, когда текст обновляется.Я думаю, что это даст вам лучшее в обоих случаях.Примерно так: 

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

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

Я бы порекомендовал заменить сторону сервера подмигиваний для загрузки страницы.Это будет более производительным.Также это позволит избежать изменения содержимого после первого просмотра.

0 голосов
/ 05 июня 2011

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

используя эти смайлики:

1- [улыбается]

2- [wink]

3- [застенчивый]

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

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

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

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

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

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

0 голосов
/ 05 июня 2011

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

...