3

Olá, sou leigo em JS/JQuery, mas creio que é nele que irei conseguir fazer o que quero.

Não sei se muitos já utilizaram o 4chan, mas lá, há uma função em que, se o usuário utiliza o ">" em cada começo da linha(sim, somente a linha), o mesmo acaba ficando com a cor verde.

Se alguém puder explicar, ficarei grato demais :).

Exemplo:

Se: Começo de <p> == ">"{
Cor da linha == green
}
1
  • Você quer a cor da linha ou a linha em verde ? Commented 1/02/2016 às 13:49

3 Respostas 3

4

Bom, a primeira coisa que você deverá fazer é verificar se o texto possui o caracter que deseja. Se sim adicione a classe ao texto com o estilo desejado. Se não, envie ele normalmente.

Existe algumas formas de se obter o primeiro caracter, como o .chartAt(), .slice() ou .subString(). Mas independente da forma, basta obter o caracter e comparar. Olhe um exemplo simples abaixo:

$('#btnEnviar').click(function(){
var texto = $('#texto').val(); //pego o valor do input

var first = texto.charAt(0); // seleciono o primeiro caracter

if(first == '>'){ //Verifico se possui o ">"
  
$('#resposta').addClass('green'); //Adiciono a classe
  
texto = texto.substring(1); //Removo o primeiro caracter
}else{
$('#resposta').removeClass('green');
}
  
$('#resposta').html(texto); //Retorno o texto sem o primeiro caracter.
});
.green{
  color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="texto"/>
<input type="submit" value="enviar" id="btnEnviar">
<br/>
<p id="resposta">

</p>

JSFIDDLE

Nesse exemplo eu simplesmente seleciono o texto, pego o primeiro caracter e vejo se é o ">". Se for eu adiciono a classe para deixar verde e removo o primeiro caracter, senão mostro ele normalmente.

3
  • Origado pela explicação! Acho que entendi como funciona :)
    – pxntxs.
    Commented 1/02/2016 às 14:07
  • Note que caso não tenha o caractere >, deve se remover o class green. Ao executar > teste, teste, albos ficam verde. Commented 1/02/2016 às 14:19
  • @GuilhermeLautert Nem cheguei a verificar, pensei mais num chat na implementação do exemplo. Fiz a correção. Obrigado pelo aviso
    – Randrade
    Commented 1/02/2016 às 14:55
1

Há varias formas de se fazer isto,vou demonstra-las da mais facil e menos precisa ate a mais precisa para que você escolha a que melhor resolve o seu problema.

Primeiramente você precisa saber que as strings em Javascript podem ser acessadas como se fossem um array, então você poderia verificar se a string começa com um > simplesmente acessando o index 0 da string da seguinte forma.

if (conteudo[0] === ">") {}

Estou verificando apenas pelo caractere >, se você precisa que este caracteres esteja envolto por aspas duplas, então você pode fazer 3 verificações na string, da seguinte forma.

if (conteudo[0] === '"' && conteudo[1] === '>' && conteudo[2] === '"'){}

Esta forma é simples mas é uma pratica ruim, então vamos tentar verificar o grupo todo de uma vez.

if (conteudo.indexOf('">"') === 0) {}

O indexOf retorna o index da string onde aparece a substring passada como argumento para a função. Neste caso o 0 significa que ocorre no começo da string. Isto funciona um pouco melhor e é melhor de ler e mais facil de manter o codigo, mas ainda sim não é a melhor solução pois não leva em consideração que a sua linha possa começar com um caractere de espaço, então vamos utilizar expressão regular para ver como ficaria.

var re = /^\s*">"/;
if (re.exec(conteudo)){}

Agora temos uma expressão regular que verifica se a variavel conteúdo começa com nenhum, um ou varios espaços seguido de ">", e utilizamos a função exec para verificar se a string contido na variavel conteudo satisfaz a condição da nossa expressão regular. Então acredito que esta seja a melhor solução, ate mesmo para você criar tags diferentes no futuro. Talvez eu esteja errado sobre a expressão regular e exista uma forma melhor, nossos colegas do StackOverflow vão nos ajudar com isto mas creio que o caminho que você tem que trilhar para conseguir o que deseja siga estas pistas que aqui deixei. Qualquer duvida comente, e leve em consideração que nos exemplos eu uso uma variavel chamada conteudo, que deve conter o conteúdo do seu elemento p.

1
  • Obrigado pela explicação! :)
    – pxntxs.
    Commented 1/02/2016 às 14:07
1

$(document).ready(function() {
  var str = $("p");
  $(str).each(function(index, value) {
    if(str[index].innerHTML.chartAr(0) == '&gt;' || str[index].innerHTML.chartAr(0) == '>'){
      $(this).css('color', 'green');
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<p>Teste</p>
<p>Teste</p>
<p>Teste</p>
<p>> Teste</p>
<p>Teste</p>

Percebi que a função indexOf poderia gerar um bug no sistema e coloquei a função chartAr() usada pelo @Randrade que pega especificamente o primeiro caractere.

O indexOf() pega a posição da primeira ocorrência do caracter numa string. O que poderia deixar a linha verde independente de onde estivesse o caracter >.

2
  • Obrigado pela ajuda! Mas percebi que ao editar, não acontece mas a função da cor ficar verde. Mas valeu pela explicação :)
    – pxntxs.
    Commented 1/02/2016 às 14:06
  • Corrigi o código. Commented 1/02/2016 às 14:48

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 .