How to know if at the beginning of a <p> they have "x" character?

Question

Hello, I am a layman in JS/Jquery, but I believe that is where I will be able to do what I want.

I don’t know if many have used 4chan, but there is a function where, if the user uses the ">" at each beginning of the line (yes, only the line), the same ends up with the green color.

If anyone can explain, I’d be so grateful :).

Example:

Se: Começo de <p> == ">"{
Cor da linha == green
}

Answer 1

Well, the first thing you should do is check if the text has the character you want. If yes, add the class to the text with the desired style. If not, send it normally.

There are some ways to get the first character, such as the .chartAt(), .Slice() or .substring(). But regardless of the form, just get the character and compare. Look at a simple example below:

$('#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

In this example I simply select the text, take the first character and see if it is the ">". If it is I add the class to make it green and remove the first character, otherwise I’ll show it normally.

Answer 2

$(document).ready(function() {
  var str = $("p");
  $(str).each(function(index, value) {
    if(str[index].innerHTML.chartAr(0) == '>' || 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>

I realized that function indexOf could generate a bug in the system and put the function chartAr() used by @Randrade which specifically picks the first character.

The indexOf() takes the position of the first occurrence of the character in a string. What could leave the green line independent of where the character was >.

Answer 3

There are many ways to do this,.

First you need to know that the Javascript strings can be accessed as if they were an array, then you could check if the string starts with a > by simply accessing the index 0 of the string as follows.

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

I’m just checking by the character >, if you need this character to be wrapped in double quotes, then you can do 3 checks on the string, as follows.

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

This form is simple but it is a bad practice, so let’s try to check the whole group at once.

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

The indexof returns the index of the string where the substring passed as the argument to the function appears. In this case 0 means that it occurs at the beginning of the string. This works a little better and is better to read and easier to keep the code, but it is still not the best solution because it does not take into account that your line can start with a space character, so let’s use regular expression to see how it would look.

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

Now we have a regular expression that checks whether the content variable starts with no, one or several spaces followed by ">", and we use the exec function to check whether the string contained in the content variable satisfies the condition of our regular expression. So I believe this is the best solution, even for you to create different tags in the future. Maybe I am wrong about the regular expression and there is a better way, our colleagues at Stackoverflow will help us with this but I believe that the path you have to tread to get what you want follow these clues I left here. Any doubt comment, and take into account that in the examples I use a variable called content, which should contain the content of your element p.