reconocer caracteres con javascript

[emprear]

me parece que te referis a que trás el reemplazo la primera linea te queda
-
con tan solo un guión, poruqe tu texto efectivamente empieza con uno, podés reemplazar la expresión por esta

var n=str.replace(/\-/g,"<br />-");

y te quedarían todas lineas comenzando por guion, o simplemente usar
var n=str.replace(/\-/g,"<br />");
y eliminar lo guiones

otra variante sería, antes de hacer los reemplazos como hice arriba, quitarle el guion inicial con
var n = str.substring(1);

un detalle, en mi código hay un pequeño error, yo puse para emular el texto

Código HTML:

<p id="demo">
- 3 o 4 mazorcas de maíz morado - 1 litro y medio de agua - 1 cáscara de piña Entera - 10 gramos de clavo - 10 gramos de canela - 2 limones - azúcar al gusto</p>
 

debería ser

Código HTML:

<p id="demo">- 3 o 4 mazorcas de maíz morado - 1 litro y medio de agua - 1 cáscara de piña Entera - 10 gramos de clavo - 10 gramos de canela - 2 limones - azúcar al gusto</p>
 

es decir eliminando esa linea en blanco después del <p id="demo">, que equivale a \n, y se considera un caracter a la hora de hacer el substr()

SAludos