5

Bom dia No meu projeto atual, estou precisando marcar contatos do indivíduo e/ou hashtags no texto, enquanto o mesmo digita Por exemplo, ao digitar '@' e as primeiras letras, o javascript reconhecer que tem que procurar por usuários, ou ao digitar '#' com uma palavra, o javascript reconhecer que tem que marcar a palavra como um link de busca para a mesma

A parte de procurar os contatos é tranquila para mim, utilizando o Ajax ou uma lista pré-carregada, o que não estou conseguindo mesmo é que o javascript saiba quando deve pegar a palavra certa para marcar

Alguém pode ajudar? Desde já agradeço

4
  • 2
    estás a usar textarea ou input? e como saber que a 'tag' acabou? são sempre palavras unicas?
    – Sergio
    20/05/2015 às 14:09
  • Podes dar também um exemplo do resultado que queres ter com os links?
    – Sergio
    20/05/2015 às 14:28
  • 1
    @IsaiasLima escrevi a implementação em javascript utilizando jQuery e agora atualizei essa implementação para um Plugin jQuery para melhor reutilização de código. 20/05/2015 às 14:33
  • Estou usando uma div editável @Sergio 20/05/2015 às 17:07

4 Respostas 4

2

Utilizando o jQuery UI AUtocomplete, eu conseguiu resolver esse problema da seguinte forma:

Considerando que eu tenha os arrays pré-carregados, usuarios e tags, utilizo a função startsWith para verificar se o text começa com "@" ou "#". Daí defino qual será o array usado para sugestão. Depois, utilizo o método grep do jQuery para filtrar os itens que começam com o texto digitado a partir do segundo caractere. O array de retorno é o que será usado para autocompletar:

$("#txt").autocomplete({
    source: function (req, responseFn) {
        var source = [];
        if (req.term.startsWith("@")) 
            source = usuarios;
        else if (req.term.startsWith("#"))
            source = tags;

        var encontrados = $.grep(source, function (item, index) {                
            return item.toLowerCase().startsWith(req.term.substring(1).toLowerCase());
        });
        responseFn(encontrados);
    }
});

Veja o jsFiddle de um exemplo funcionando: http://jsfiddle.net/v6Ldf3aa/

1
  • Vou testar a implementação aqui, valeu 20/05/2015 às 17:14
2

Escrevi a base do código javascript com a logica que você precisará para fazer a busca no servidor usando AJAX, utilizei a biblioteca jQuery para abstrair algumas coisas.

(function($) {
    $.fn.hashtag = function(options) {
        var settings = $.extend({
            searchingValue: function() {},
            completeValue: function() {}
        }, options);

        var Hastag = {
            implementationKeyUp: function() {
                var inValue, lastPos, lastChar, hashPos, hashValue;
                lastPos = this.selectionStart - 1;
                inValue = $(this).val().slice(0, lastPos + 1)
                lastChar = inValue[lastPos];
                hashPos = inValue.lastIndexOf("#");
                hashValue = inValue.slice(hashPos);
                if (lastChar == "#") {
                    $(this).data({
                        "searching": true,
                        "currentHashPos": lastPos
                    });
                } else if (lastChar == String.fromCharCode(32) && $(this).data("searching")) { //verifica espaço
                    $(this).data("searching", false);
                    settings.completeValue.call(this, hashValue);
                } else if ($(this).data("searching") && lastChar != String.fromCharCode(32))
                    settings.searchingValue.call(this, hashValue);

                if ($(this).data("currentHashPos") > lastPos || this.selectionStart < $(this).data("currentHashPos"))
                    $(this).data("searching", false);
            },
            implementationKeyDow: function(e) {
                var keyCode = e.keyCode;
                if ($(this).data("searching") && keyCode == 35)
                    return false;
            }
        };
        this.each(function() {
            $(this)
                .on("keyup", Hastag.implementationKeyUp)
                .on("keydown", Hastag.implementationKeyDow)
                .data({
                    "searching": false,
                    "currentHashPos": null
                });
        });
    }
}(jQuery));

var events = {
    searchingValue: function(hashValue) {
        console.log("Procurando: " + hashValue);
        $("#procurando").text("Procurando: " + hashValue);
    },
    completeValue: function(hashValue) {
        console.log("Completo: " + hashValue);
        $("#completo").text("Completo: " + hashValue);
    }
}

$("#message").hashtag(events);
// by @TuyoshiVinicius
p{
    padding:0;
    margin:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" id="message">
<p>Resultado:</p>    
<div id="console">
    <p id="procurando"/>
    <p id="completo"/>
</div>    

Exemplo no jsfiddle

1
  • Maravilha, vou fazer os testes aqui 20/05/2015 às 17:13
2

Podes usar uma regexp para extrair resultado desse texto e depois iterar os resultados:

var textarea = document.querySelector('textarea');
textarea.addEventListener('keyup', function () {
    var text = this.value;
    var matches = text.match(/([#@][^\s]+)/g);
    if (matches) matches.forEach(function (match) {
        var tag = match.slice(0, 1);
        var texto = match.slice(1);
        console.log(tag, texto); // fazer algo com tag e texto
    });
});

jsFiddle: http://jsfiddle.net/umf4m41f/

A regex /(\[#@\]\[^\s\]+)/g explicada:

  • () grupo de captura/match
  • [#@] um dos caracteres presentes dentro de []
  • [^\s] qual quer caracter excepto \s (espaço em branco)
  • + uma ou mais ocorrências (de caracteres exepro \s
  • g todas as vezes que tal match aparecer

Depois podes iterar esses matches e fazer substituições ou ajax.

4
  • 1
    Eu tinha pensado em algo assim também, mas não tenho muito conhecimento ainda de expressão regular... boa hora para me familiarizar Valeu, vou testar aqui 20/05/2015 às 17:14
  • @IsaiasLima dá uma olhada no link da primeira linha, uma ferramenta boa para trabalhar regex.
    – Sergio
    20/05/2015 às 17:16
  • Valeu, vou olhar sim 20/05/2015 às 17:37
  • @IsaiasLima juntei uma explicação melhor à regex.
    – Sergio
    20/05/2015 às 17:58
1

Considerando que a pesquisa por usuário ou hashtag deve iniciar quando o cursor estiver sobre a palavra-chave começada com @ ou # fiz o código abaixo, ele vai executar um alert() quando deve iniciar a pesquisa.

// busca a palavra em que o cursor está
var getSelectedWord = function(textarea) {
  var text = textarea.value;
  var start = 0;
  var size = text.length;
  var index;
  if (textarea.selectionEnd === textarea.selectionStart) {
    index = text.substr(0, textarea.selectionStart).lastIndexOf(' ');
    if (index > 0) {
      start = index + 1;
      size -= start;
    }
    index = text.indexOf(' ', textarea.selectionEnd);
    if (index > 0) {
      size = index - start;
    }
    return text.substr(start, size);
  }
  return false;
}
document.querySelector('textarea').addEventListener('keyup', function(){
  var selectedWord = getSelectedWord(this);
  // a palavra selecionada tem 3 caracteres ou mais depois do @ ou #
  if (selectedWord && selectedWord.length > 3) {
    if (selectedWord.startsWith('#')) {
      alert('pesquisa hashtag: ' + selectedWord);
    } else if (selectedWord.startsWith('@')) {
      alert('pesquisa usuário: ' + selectedWord);
    }
  }
}, false);
textarea {
  width: 100%;
  min-height: 50px;
}
<textarea placeholder="digite @foo ou #bar"></textarea>

1
  • Vou fazer os testes aqui Obrigado 20/05/2015 às 17:15

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .