Форматировать цвет при наборе текста в текстовом или предварительно - PullRequest
Новая
       59

Форматировать цвет при наборе текста в текстовом или предварительно

2 голосов
/ 02 марта 2020

Я пытаюсь создать раздел комментариев, который позволяет пользователям @ someone. Когда пользователь вводит @random, а затем пробел, я хочу, чтобы он был выделен. Итак, я создал что-то, что ищет и заменяет строку, но потом, когда заменяется html, он помещает курсор в начало. Любой способ решить это? Любой другой способ сделать что-то подобное? 

$('#textarea').keyup(function() {
  txt = this.innerText.split(" ")
  new_txt = this.innerText
  for (var i = txt.length - 1; i >= 0; i--) {
    if (txt[i].startsWith('@') == false) {
      delete txt[i]
    }
  }
  txt = txt.sort().join(" ").trim().split(" ")
  console.log(txt)
  if (txt.length > 0 && txt[0] != "") {
    for (var i = 0; i < txt.length; i++) {
      new_txt = new_txt.replace(txt[i], '<mark>' + txt[i] + '</mark>')
    }
    $('#my_console_log').text(new_txt)
    this.innerHTML = new_txt
  }
});
pre {
  border: solid black 1px;
}

mark {
  background: blue;
  color: red;
}

Test page

Ответы [ 2 ]

2 голосов
/ 02 марта 2020

Вот простой доступный плагин , который может быть вам полезен. Загрузите плагин и отредактируйте файл jquery .hashtags. js и удалите условие для # . Вы также можете изменить стиль в соответствии с вашими требованиями. 

(function($) {
$.fn.hashtags = function() {
    $(this).wrap('<div class="jqueryHashtags"><div class="highlighter"></div></div>').unwrap().before('<div class="highlighter"></div>').wrap('<div class="typehead"></div></div>');
    $(this).addClass("theSelector");
    autosize($(this));
    $(this).on("keyup", function() {
        var str = $(this).val();
        $(this).parent().parent().find(".highlighter").css("width",$(this).css("width"));
        str = str.replace(/\n/g, '<br>');
        if(!str.match(/(http|ftp|https):\/\/[\w-]+(\.[\w-]+)+([\w.,@?^=%&amp;:\/~+#-]*[\w@?^=%&amp;\/~+#-])?#([a-zA-Z0-9]+)/g) && !str.match(/(http|ftp|https):\/\/[\w-]+(\.[\w-]+)+([\w.,@?^=%&amp;:\/~+#-]*[\w@?^=%&amp;\/~+#-])?@([a-zA-Z0-9]+)/g) && !str.match(/(http|ftp|https):\/\/[\w-]+(\.[\w-]+)+([\w.,@?^=%&amp;:\/~+#-]*[\w@?^=%&amp;\/~+#-])?#([\u0600-\u06FF]+)/g) && !str.match(/(http|ftp|https):\/\/[\w-]+(\.[\w-]+)+([\w.,@?^=%&amp;:\/~+#-]*[\w@?^=%&amp;\/~+#-])?@([\u0600-\u06FF]+)/g)) {

            // Remove below condition for hashtag.
            if(!str.match(/#(([_a-zA-Z0-9]+)|([\u0600-\u06FF]+)|([ㄱ-ㅎㅏ-ㅣ가-힣]+)|([ぁ-んァ-ン]+)|([一-龯]+))#/g)) { //arabic support, CJK support
                str = str.replace(/#(([_a-zA-Z0-9]+)|([\u0600-\u06FF]+)|([ㄱ-ㅎㅏ-ㅣ가-힣]+)|([ぁ-んァ-ン]+)|([一-龯]+))/g,'<span class="hashtag">#$1</span>');
            }else{
                str = str.replace(/#(([_a-zA-Z0-9]+)|([\u0600-\u06FF]+)|([ㄱ-ㅎㅏ-ㅣ가-힣]+)|([ぁ-んァ-ン]+)|([一-龯]+))#(([_a-zA-Z0-9]+)|([\u0600-\u06FF]+)|([ㄱ-ㅎㅏ-ㅣ가-힣]+)|([ぁ-んァ-ン]+)|([一-龯]+))/g,'<span class="hashtag">#$1</span>');
            }

            // Keep this condition.
            if(!str.match(/@(([a-zA-Z0-9]+)|([\u0600-\u06FF]+)|([ㄱ-ㅎㅏ-ㅣ가-힣]+)|([ぁ-んァ-ン]+)|([一-龯]+))@/g)) {
                str = str.replace(/@(([a-zA-Z0-9]+)|([\u0600-\u06FF]+)|([ㄱ-ㅎㅏ-ㅣ가-힣]+)|([ぁ-んァ-ン]+)|([一-龯]+))/g,'<span class="hashtag">@$1</span>');
            }else{
                str = str.replace(/@(([a-zA-Z0-9]+)|([\u0600-\u06FF]+)|([ㄱ-ㅎㅏ-ㅣ가-힣]+)|([ぁ-んァ-ン]+)|([一-龯]+))@(([a-zA-Z0-9]+)|([\u0600-\u06FF]+)|([ㄱ-ㅎㅏ-ㅣ가-힣]+)|([ぁ-んァ-ン]+)|([一-龯]+))/g,'<span class="hashtag">@$1</span>');
            }
        }
        $(this).parent().parent().find(".highlighter").html(str);
    });
    $(this).parent().prev().on('click', function() {
        $(this).parent().find(".theSelector").focus();
    });

};
})(jQuery);
0 голосов
/ 02 марта 2020

Вместо замены html просто добавьте класс нужного цвета

...