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

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

There are a few ways to get the first character, such as . chartAt () , .slice () or .subString () . But regardless of 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><inputid="texto"/>
<input type="submit" value="enviar" id="btnEnviar">
<br/>
<p id="resposta">

</p>

JSFIDDLE

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

There are several ways to do this, I'll show them from the easiest and the least precise to the most accurate so that you can choose the one that best solves your problem.

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

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

I'm just checking for the > character, if you need this characters to be double-quoted, 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 a time.

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

The indexOf returns the index of the string where the last substring appears as an argument to the function. 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 maintain the code, but still is 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 would it look.

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

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

$(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 noticed that the indexOf function could generate a bug in the system and put the chartAr() function used by @Randrade that specifically picks up the first character.

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