Numerar lineas de un textarea

S|ck · #1 (**permalink**) 25/10/2012, 03:50

Hola amigos.

Tengo un formulario donde los usuarios introducen enlaces en un textarea, un enlace por linea.

Lo que quiero conseguir es que pulsando un boton se numeren las lineas del textarea dinamicamente.

enlace1
enlace2
enlace3

al pulsar el boton:

1- enlace1
2- enalce2
3- enlace3

Saludos y gracias

emprear · #2 (**permalink**) 25/10/2012, 06:06

Algo asi

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>numerar lineas textarea</title> 
<script type="text/javascript">
//<![CDATA[
function numerar(){
var nvalor="";
var contenido = document.getElementById('textA').value;
var lineas = contenido.split('\n');
 
for(var i = 0;i < lineas.length;i++){
nvalor  += (i+1) + ' ' +lineas[i] + '\n';
}
document.getElementById('textA').value = nvalor;
document.getElementById('n').disabled = true; //opcional
}
//]]>
</script>
</head>
<body>
<form>
<textarea name="textA" id="textA" cols="10" rows="10">
</textarea>
<br />
</form>
<button onclick="numerar();" id="n">numerar</button>
</body>
</html>

Por supuesto habría que hacerle ajustes según tus necesidades (si hubiese líneas en blanco, numerar desde 0 ó 1, alternar entre contenido original y contenido numerado,etc)
Saludos

S|ck · #3 (**permalink**) 25/10/2012, 06:13

Muchisimas graciaaaas!!!

IsaBelM · #4 (**permalink**) 25/10/2012, 08:07

emprear, permiteme usar tu código para dar otra solución

Cita:

function numerar(){
var contador = 0;
var contenido = document.getElementById('textA').value;
var lineas = contenido.replace(new RegExp(/([a-z0-9]+)(\s?)/g), function(or) {contador += 1; return contador + '. ' + or});

document.getElementById('textA').value = lineas;
}

con éste nos da igual que hay líneas en blanco. la expresión hay que ajustarla a los posibles caracteres que puede contener una url

emprear · #5 (**permalink**) 25/10/2012, 08:32

Cita:

Iniciado por IsaBelM

emprear, permiteme usar tu código para dar otra solución

con éste nos da igual que hay líneas en blanco. la expresión hay que ajustarla a los posibles caracteres que puede contener una url

Por supuesto.

Pero, vos la probaste?
la acabo de usar y ne devuelve
numerar_text_area.html?textA=1.+http%3A%2F%2F2.+em presr.3.+com%0D%0A4.+http%3A%2F%2F5.+xxx.6.+com
en la barra de direcciones y el textarea no lo modifica, y si le doy al botón atrás, aparece el textarea modificado con esto

1. http://2. empresr.3. com
4. http://5. xxx.6. com

usé FF, en IE hace lo mismo, pero no genera historial, asi que no hay botón vuelta atrás

EDITO:
lo de la barra de direcciones fue un error de mi parte, deje el button dentro del form y me hacía el submit, ahora, una vez corregido eso me devuelve
si ingreso: http://lessframework.com/
1. http://2. lessframework.3. com/

Voy a analizar la RegExp

Saludos

furoya · #6 (**permalink**) 25/10/2012, 12:16

Hola chicos.
¿Se enojan si les dejo otra versión más?

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>numerar lineas textarea</title>
<script type="text/javascript">
//<![CDATA[
function numerar(){
var esurl = /^(ht|f)tps?:\/\/\w+([\.\-\w]+)?\.([a-z]{2,4})(:\d{2,5})?(\/.*)?$/i;
var nlinea = 0;
var nvalor="";
var contenido = document.getElementById('textA').value;
var lineas = contenido.split('\n');

 
for(var i = 0; i < lineas.length; i++){
 if(esurl.test(lineas[i])) {
 nlinea++
 nvalor += nlinea +"\t"+ lineas[i] +"\n";
 }
 else nvalor += lineas[i] +"\n";
}

document.getElementById('textA').value = nvalor;

}
//]]>
</script>
<title></title>
</head>
<body>
<form>
<textarea name="textA" id="textA" cols="50" rows="10" wrap=off>http://www.forosdelweb.com
wertyu
http2://www.forosdelweb.com
http://www.forosdelweb.com/f13/numerar-lineas-textarea-1019735/</textarea>
<br />
<input type=button onmousedown="numerar();" id="n" value="Numerar" /></form>
</body>
</html>

Aquí doy por hecho que las url's van cada una en una línea; que pueden estar mezcladas con otro texto al que no hay que numerar; y , ya que estamos, que la url sea válida (porque si hay un error, la toma como un vulgar texto del párrafo).

Aprovecho y comento algo que me entretuvo un buen rato. Los formularios no me reconocen la etiqueta de botón HTML. Lo tuve que cambiar por un input. Nadie lo comentó, no sé por qué me pasa en FF y Chr (no lo probé en otros).

Y hay más interpretaciones al planteo original. Uno que estaba por hacer, hasta que me entretuvo eso del botón, es que los número no fuesen parte del texto, sino que se viesen, pero no se copiaran ni seleccionaran ni se capturaran como valor.

Otro asunto es lo absurdo de usar un textarea, pudiendo usar un <input type=text>, que ya es de una sola línea y no va a haber confusiones : se valida que sea url, y se pasa numerado a otro campo que ya tiene el formato de la lista. Eso, si solamente puede aceptar direcciones web.

Debe haber más vueltas, pero ya tengo una de mis dos neuronas agotadas y todavía tengo que seguir trabajando.
(Porque alguna vez, trabajo.)

emprear · #7 (**permalink**) 25/10/2012, 13:31

@Furoya,
te tomo prestadas tu script y tus 2 neuronas agotadas (y no trabajes por un rato para no quedar en evidencia) y las sumo a las 2 mías, agotadas también, con lo que me dá para esto

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>numerar lineas textarea</title>
<style type="text/css">
/*<![CDATA[*/
#contenedor, #contenedor textarea{border:dotted 1px #75888E; width:600px; font-size: 10pt; font-family: verdana, sans-serif; };
/*]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
function numerar(){
var esurl = /^(ht|f)tps?:\/\/\w+([\.\-\w]+)?\.([a-z]{2,4})(:\d{2,5})?(\/.*)?$/i;
var nvalor="<ol>";
var contenido = document.getElementById('textA').value;
var lineas = contenido.split('\n');
 
 
for(var i = 0; i < lineas.length; i++){
 if(esurl.test(lineas[i])) {
 nvalor += '<li>' + lineas[i] +"<\/li>";
 }
}
document.getElementById('contenedor').innerHTML = nvalor + '<\/ol>';
nvalor = "";
}
//]]>
</script>
</head>
<body>
<div id="contenedor">
<form action="#">
<textarea name="textA" id="textA" cols="150" rows="10">
http://www.forosdelweb.com
wertyu
http2://www.forosdelweb.com
http://www.forosdelweb.com/f13/numerar-lineas-textarea-1019735/
</textarea>
</form>
</div>
<p>
<br />
<button  onmousedown="numerar();" id="n">Numerar</button>
</p>
</body>
</html>

Seguro hay peros... pero visualmente mejorada y eliminadas las NO urls

SAludos

IsaBelM · #8 (**permalink**) 25/10/2012, 13:50

no lo probé. lo hice a vuela pluma

vayamos por partes

Cita:

Iniciado por emprear

la acabo de usar y ne devuelve
numerar_text_area.html?textA=1.+http%3A%2F%2F2.+em presr.3.+com%0D%0A4.+http%3A%2F%2F5.+xxx.6.+com
en la barra de direcciones y el textarea no lo modifica

también respondiendo al planteo de furoya, esto ocurre por que se está usando <button> sin el atributo type y por defecto es type="submit". de tal modo que lo que se está haciendo es ejecutar la función y sumitar el formulario

Cita:

Iniciado por emprear

y si le doy al botón atrás, aparece el textarea modificado con esto

1. http://2. empresr.3. com
4. http://5. xxx.6. com

usé FF, en IE hace lo mismo, pero no genera historial, asi que no hay botón vuelta atrás

Saludos

es a lo que me refería a que habría que perfilar la expresión regular. tal y como está ahora si insertas líneas de texto

Cita:

dasdasdd
adada
adad

adada
adda

funcionará. para hacer que funcione con url, una posible expresión sería

Cita:

/([a-z0-9_:\.\/-])+(\s?)/gi

edito: ahora pruebo vuestras versiones y le saco los peros

edito2: con la expresión de furoya, mi versión hace lo mismo que la suya pero sin tabulación

emprear · #9 (**permalink**) 25/10/2012, 14:32

@IsaBelM

Si, noté lo del submit, el button me quedó dentro del form. lo edité arriba pero no lo llegaste a ver
Esperamos opiniones

Está quedando un híbrido
Saludos

furoya · #10 (**permalink**) 25/10/2012, 21:40

Cita:

Iniciado por emprear

@IsaBelM

Si, noté lo del submit, el button me quedó dentro del form. lo edité arriba pero no lo llegaste a ver

Cita:

Iniciado por IsaBelM

también respondiendo al planteo de furoya, esto ocurre por que se está usando <button> sin el atributo type y por defecto es type="submit". de tal modo que lo que se está haciendo es ejecutar la función y sumitar el formulario

Ah. Era eso. Qué nabo que no me di cuenta. Me lo estaba submitando.

Cita:

Iniciado por IsaBelM

edito2: con la expresión de furoya, mi versión hace lo mismo que la suya pero sin tabulación

Sí, pero a mí me quedó más linda, porque la puse entre etiquetas de código.

La verdad es que ése no era el invento que iba a postear. Se quedó ahí, pero la idea era hacer algo como lo que pusiste, emprear, aunque en un textarea.

Estoy dejando mucho ejemplo a medias; hace poco también abandoné uno para un botón que subía o bajaba la página, creo que desvirtuamos tanto el tema que ya era imposible volver al tópico.

Bueno, a éste también lo estamos desvirtuando, ya ni nos interesa qué quería hacer S|ck. Empezamos a divagar opciones a lo pavote.

IsaBelM · #11 (**permalink**) 27/10/2012, 07:35

sí que nos interesó y se solucionó. en el #3 lo deja bien claro

si nadie dice que una vez solucionado el problema del usuario en cuestión, no se puede desfasar un poco, yo continuaré haciéndolo. me divierte intentar destripar un código e intentar llevarlo un paso mas allá

continuo con la masacre

hemos estado trabajando con un cadena que sólo tenía saltos de líneas. y si además tiene espacios??

Cita:

Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy
http://www.forosdelweb.com, sed diam nonummy
nibh euismod tincidunt
http2://www.forosdelweb.com ut laoreet dolore
http://www.forosdelweb.com/f13/numer...tarea-1019735/ magna aliquam erat
magna aliquam erat volutpat. Ut wisi enim

lo que se me ha ocurrido es usar el método exec() aunque es algo costoso y añadir un carácter especial a la última agrupación

Cita:

furoya · #12 (**permalink**) 27/10/2012, 10:46

Muy prometedora tu última edición. Termino de mandar este post y la veo.
De cualquier forma, si nos atenemos al caso inicial, no hay espacios en las url, y en la misma linea tampoco hay más texto.

Cita:

Iniciado por IsaBelM

sí que nos interesó ...

A vos. A mí nunca me importó.

Hemos parasitado cada tema...
Y acá nadie se puede quejar, todavía no empezamos a hablar de figuras religiosas, bares notables o identidad de género.

Lo que sí ya me harté de abandonar el "paso más allá".
Voy a darme una vuelta por tu tema sobre rotación de banners la próxima semana.

Por ahora, te sigo el juego.
Y completo aquí lo que te mencioné más arriba, emprear.

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title>TEXTAREA CON LÍNEAS NUMERADAS.</title>
<script type="text/javascript">

function numeraLinea() {
 var caja = document.getElementById("cajaNumerada");
 var numerador = document.getElementById("numeros");
 var texto = document.getElementById("numerable");
 var parrafos = texto.value.split("\n").length; 

 texto.rows = parrafos+1; 
 texto.scrollLeft = 1; 
 numerador.innerHTML = "";
 numerador.style.visibility = "visible";
 caja.style.height = texto.offsetHeight +"px";

 for(p=0; p<parrafos; p++) {
  numerador.innerHTML += (p+1) +".<br>"
 }

 texto.style.paddingLeft = (numerador.offsetWidth+2) + "px";

}

function edita() {
 document.getElementById("numeros").style.visibility = "hidden";
}

//onload = numeraLinea;
</script>
<style type="text/css">
#cajaNumerada {padding: 0; position: relative; height: 210px; }

#numeros {padding: 1px 2px; position: absolute; top: 0; left: 0; font-weight: bold; 
background-color: silver; font-size: 14px; line-height: 1.2; text-align: right; }

#numerable {padding: 0 0 0 2em; position: absolute; top: 0; left: 0; margin: 0; 
resize: horizontal; background-color: transparent; font-size: 14px; line-height: 1.2; 
border: 1px solid black; }

</style>
</head>
<body>
<h2>Numera líneas reales fuera del texto.</h2>

<div id=cajaNumerada>
<div id=numeros></div>
<textarea id=numerable wrap=off onblur="numeraLinea()" 
onfocus="edita()" rows=12>ALFA
BRAVO 
CHARLY 
DELTA 
ECO 
FOXTROT FOXTROT FOXTROT FOXTROT FOXTROT FOXTROT FOXTROT FOXTROT FOXTROT FOXTROT 
GOLF 
HOTEL 
INDIO
JULIETA
KILO</textarea>
</div>

<p>La numeración aparece al dejar la edición del <code>textarea</code>. </p>

</body>
</html>

Funciona en todos los navegadores (¡hasta en IE6!).

ajustar tamaño de textarea al contenido

textarea en una linea entera

Líneas virtuales numeradas.

textarea{text-indent:2em;} en OPERA no funciona

cuantos lineas de texto tengo en un div?

emprear · #13 (**permalink**) 27/10/2012, 13:04

@IsabelM, @furoya...
lo mío es siempre más light, Uds, a la hora de dar los pasos, se me estan poniendo los zancos.

furoya · #14 (**permalink**) 27/10/2012, 18:18

Ya le tengo dicho que no se me haga el humilde.
A los grandes nos queda mal.

Y sin desmerecer el trabajo que está haciendo IsaBelM con el motor RegEx y sus métodos, el mejor y más presentable ejemplo es el que puso usted. Los enlaces extraídos de la cadena deben terminar en una lista, porque es lo lógico.
Cambiando esta línea

Código:

...
nvalor += '<li><a href=\"' +lineas[i]+ '\"> ' +lineas[i]+ ' <\/a><\/li>';
...

sólo falta envolverlo para regalo con un moño.

No termino de entender bien cómo trabaja exec(), IsaBelM. Aunque me doy cuenta de que tuviste la brillante idea de eliminar las url duplicadas (cuando las hubiere)

.
Supongo que envolviste con paréntesis para que guarde las expresiones como $n y las siga repitiendo en secuencia hasta que se termina la string, pero trato de desarmar el mecanismo y no lo saco.

(Cómo odio cuando tengo que reconocer que sos más inteligente que yo. Aunque tampoco te agrandés, que eso no conlleva demasiado mérito ...)

IsaBelM · #15 (**permalink**) 28/10/2012, 14:28

no se me da bien explicar la teoría, pero ahí va.

el método exec() retorna un array cuando la expresión es global. tenemos que fijarnos en la propiedad lastIndex que indica en qué posición ocurrió la última concurrencia de esa vuelta. cuando se vuelve a invocar al método, éste no comienza desde el inicio de la cadena, sino desde la posición de la última concurrencia.
para que quede mas claro, sólo hay que descomentar el console.log()

Cita:

Iniciado por furoya

Ya le tengo dicho que no se me haga el humilde.
A los grandes nos queda mal.

Y sin desmerecer el trabajo que está haciendo IsaBelM con el motor RegEx y sus métodos, el mejor y más presentable ejemplo es el que puso usted. Los enlaces extraídos de la cadena deben terminar en una lista, porque es lo lógico.

+1
aunque tiene poca utilidad.

<elucubración>
se podrían mostrar la lista y mantener el textarea para ser enviado. incluso se podría usar el objeto event para detectar la tecla pulsada y en caso de ser enter, agregar la uri al listado si encaja con la expresión. en caso contrario no se agrega al listado y se elimina del textarea.
</elucubración>

Cita:

Iniciado por furoya

(Cómo odio cuando tengo que reconocer que sos más inteligente que yo. Aunque tampoco te agrandés, que eso no conlleva demasiado mérito ...)

aunque sé que es de coña, no soy mas inteligente que tu. es únicamente cuestión de tiempo libre. por ahora lo tengo como castigo

furoya · #16 (**permalink**) 28/10/2012, 18:13

Gracias.

Y no era broma. Para usted vale lo mismo que le estoy repitiendo a nuestro amigo (aunque en una mujer la falsa modestia queda un poco más seductor).

No conozco un buen penalista en Madrid. Si no te lo recomendaba.

IsaBelM · #17 (**permalink**) 29/10/2012, 16:21

llevando a código mis elucubraciones

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>numerar lineas textarea</title>
<style type="text/css">
/*<![CDATA[*/
#contenedor, #contenedor textarea{border:dotted 1px #75888E; width:600px; font-size: 10pt; font-family: verdana, sans-serif; };
/*]]>*/
</style>

<script type="text/javascript">
//<![CDATA[
function numerar(evt, elem){

if (evt.keyCode == 13) {
var reg = /((ht|f)(tps?:\/\/\w)+([\.\-\w]+)?(\.)([a-z]{2,4})(:\d{2,5})?(\/.\S*)?)/gi;
var arr = [], editado = '', valTextarea = '';

while ((arr = reg.exec(elem.value)) != null) {
editado += '<li><a href=\"' +arr[0]+ '\">' +arr[0]+ '<\/a><\/li>';
valTextarea += arr[0] + '\n';
}

document.getElementById('contenedor').innerHTML = '<ol>' + editado + '<\/ol>';
elem.value = valTextarea;
return false;
}

}

function ping(u) {
var uris = document.getElementById('contenedor').getElementsB yTagName('a');

if(u <= parseInt(uris.length)-1) {
var jslibajax=document.createElement('script');
jslibajax.setAttribute('type','text/javascript');
jslibajax.setAttribute('src', 'http://www.ajax-cross-domain.com/cgi-bin/ACD/ACD.js?uri=('+uris[u].innerHTML+'/)');
document.getElementsByTagName('head')[0].appendChild(jslibajax);
}

setTimeout(function() {

if(ACD.status == '200 OK') {
uris[u].parentNode.innerHTML += ' ☑';
} else {
uris[u].parentNode.innerHTML += ' ☒';
}
document.getElementsByTagName('head')[0].removeChild(document.getElementsByTagName('script ')[1]);

if(parseInt(u,10) <= parseInt(uris.length-2)) {ping(parseInt(u) + 1);}

}, 4000)

}
//]]>
</script>
</head>
<body>
<div id="contenedor"></div>
<form action="#">
<textarea name="textA" id="textA" cols="150" rows="10" onkeypress="return numerar(event, this)">
http://www.google.com/
http://www.forosdelweb.com/
http://www.microsoft.com/
http://www.unsite.com/
</textarea>
<br />
<button type="submit">enviar</button>
</form>
<button type="button" onclick="ping(0)">hacer ping</button>
</body>
</html>

además le he añadido un "ping" para saber si la url, además de tener la estructura correcta, existe. se trata de usar la librería ajax-cross-domain y comprobar la propiedad status.

veréis que "forosdelweb" no existe. creo que es debido a que la librería ha de tener alguna directiva donde se pueda permitir todas las uri. esto es sólo una suposición ya que no he descargado la librería- los site en lo que se recibe el status 200 son google y microsoft

emprear · #18 (**permalink**) 29/10/2012, 16:30

Siga sublimando el js @IsableM

y efectivamente, yo la uso a veces

Código perl:

Ver original##########################################################################################
# Configuration area                                                                     #
##########################################################################################
 
# which query-strings are allowed to call this script ?
my @allowed_uris = (
                      'uri=(http://www.google.com)',
                      'uri=(http://www.411.ca/search/%23!q=restaurants)',
                      'uri=(http://www.google.com/)',
                      'uri=(http://216.92.131.147/dotserv/ACD/?name=john)',
                      'uri=(http://www.microsoft.com/)',
                      'uri=(http://emprear.com/)'               
              );

Saludos

furoya · #19 (**permalink**) 05/11/2012, 07:53

Así que no sólo lista las url, sino que además las prueba.
Un lujo. Ya me da vergüenza volver por acá con mis engendros.
Pero quise experimentar con exec() (gracias, IsaBelM), y traté de darle una vuelta más al textarea numerado que puse más arriba; esta vez sí con enlaces y texto mezclado.

No hay caso, no entiendo bien cómo trabaja. O sí, entiendo, pero no puedo hacer que funcione con while(), ni pude separar el link del texto en más de una línea.
La idea final era escribir un texto mezclado con url's y separar a éstas en una línea independiente del resto. Así al numerar cada párrafo, a los enlaces siempre les tocaba su número propio y exclusivo.
Entonces se podía hacer que el número de índice fuese además un link, que llevara a la página que esté referida en el textarea.

Probé cortar por los saltos, y buscar aciertos con esta=reg.exec(lineas[i]), usé lineas[i].substring(0, esta.index) para obtener el texto anterior (hacia la izquierda), esta[0] para el acierto del enlace y RegExp.rightContext para el texto que seguía (a la derecha). Pero se me complicaba mucho seguir buscando en el resto del párrafo con el mismo método hasta terminar.
Y si ya había cortado por los saltos de línea, terminé con los viejos métodos que ya tenía probados. No quedó bien, todavía hace agua por varios sitios y no lo probé en IE, pero al menos está presentable y se supone compatible con navegadores viejos.

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>NUMERAR LINEAS TEXTAREA.</title>
<script type="text/javascript">
//<![CDATA[

var contenido;

function numerar(){
 if(document.forms['formulario']['editar'].checked == true){
  var esurl = /(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?/;
  var nvalor="";
  var txarea = document.getElementById('numerable');
  contenido = txarea.value;
  var corte = contenido.replace(/\r/g, " \r"); 
  var lineas = corte.split(' ');	
  var caja = document.getElementById("cajaNumerada");
  var numerador = document.getElementById("numeros");

  txarea.removeAttribute('readonly',false);

  for(i in lineas){
   lineas[i] = (esurl.test(lineas[i]))? "\n"+ lineas[i] +"\n" : lineas[i];
  }

  lineas = lineas.join(' ').split("\n");

  for(var i = 0; i < lineas.length; i++){
   nvalor += (esurl.test(lineas[i]))? "<a href=\""+ lineas[i] +"\">"+ (i+1) +".<\/a><br \/>" : (i+1) +".<br \/>";
  }

  txarea.value = lineas.join("\n");
  numerador.innerHTML = nvalor;
  txarea.scrollLeft = 0; 
  txarea.rows = lineas.length; 
  numerador.style.visibility = "visible";
  caja.style.height = txarea.offsetHeight +"px";
  txarea.style.paddingLeft = (numerador.offsetWidth + 2) +"px"; 
  caja.style.width = txarea.offsetWidth +"px";
 }

 else {
  txarea.setAttribute('readonly', true, false);	
 }
}


function edita() {
 if(document.forms['formulario']['editar'].checked == true){
  document.getElementById('numerable').removeAttribute('readonly',false);;
  document.getElementById('numerable').value = contenido;
  document.getElementById("numeros").style.visibility = "hidden";
 }

 else {
  document.getElementById('numerable').setAttribute('readonly', true, false);	
 }
}

onload = function(){contenido = document.getElementById('numerable').value;
document.forms['formulario'].reset();
//numerar();
}
//]]>
</script>
<style type="text/css">
#cajaNumerada {padding: 0; position: relative; height: 210px; margin-bottom: 30px; }

#numeros {padding: 1px 2px; position: absolute; top: 1px; left: 1px; font-weight: 900; 
background-color: gray; font-size: 14px; line-height: 1.2; text-align: right; 
cursor: not-allowed; visibility: hidden; }

#numerable {padding: 0 0 0 2em; position: absolute; top: 0; left: 0; margin: 0; 
resize: horizontal; background-color: transparent; font-size: 14px; line-height: 1.2; 
border: 1px solid black; }

a {color: maroon; background-color: silver; }

p, em, code {font-size: 20px; }
</style>
</head>
<body>
<h2>Numera líneas reales fuera del texto, buscando y separando los links. 
(Se pueden visitar con un click en su número de índice.) </h2>

<form name="formulario" id="formulario">
<div id="cajaNumerada">
<textarea id="numerable" wrap="off" onblur="numerar()"  
onfocus="edita()" rows="12" cols="110">El sitio http://www.forosdelweb.com es un foro sobre tecnología web, con subforos como:
HTML y HTML5 http://www.forosdelweb.com/f4/ http://www.forosdelweb.com para lenguaje de hipertexto.
CSS http://www.forosdelweb.com/f53/ para hojas de estilo en cascada.
Javascript http://www.forosdelweb.com/f13/ para programación del lado cliente.
Además de foros para programación en servidores, diseño, fotografía, desarrollo de soft en general...
Y subforos de Soporte y Ayuda.</textarea>
<div id="numeros"></div>
</div>
<input type="checkbox" name="editar" checked /> Editable. &nbsp; <input type=button onmousedown="numerar(); this.disabled = true;" value="Numerar" />
</form>

<p>El botón [Numerar] reemplaza la ejecución de la función <code>numerar()</code> al cargar la página. Así puede verse cómo es el texto original en el <code>textarea</code>.<br />
Una vez <em>descomentada</em> la línea <code>//numerar();</code> en <code>onload</code>, el botón se puede eliminar. <br />
 <br />
El <code>checkbox</code> "Editable" permite editar el contenido, o convertirlo en <code>readonly</code> para seleccionarlo y copiarlo sin que se modifique el formato de listado. <br />
 <br />
De otra forma, cada vez que el <code>textarea</code> reciba el foco perderá el formato de listado, y con blur se reescribirán los cortes y la numeración.
</p>
</body>
</html>

Tiene varios bugs. Hay que pulirlo demasiado antes de la siguiente versión, que sería para editar en "tiempo real" y numerar líneas virtuales.
Pero ya nos estaríamos yendo mucho del tema.

emprear · #20 (**permalink**) 05/11/2012, 08:08

Nunca un uso tan acertado de la palabra engendro
Y te diría que tras un poco de scroll, sacar y poner el foco en el textarea y clickear el checkbox, tiene efectos alucinógenos.
Ojo con este código !!!

IsaBelM · #21 (**permalink**) 06/11/2012, 05:35

me pregunto hasta que punto de degeneración llegaremos

pues nada, intentemos la siguiente versión

furoya · #22 (**permalink**) 06/11/2012, 06:36

No quería postear esto hasta confirmarlo, pero ya que estoy lo comento, por sí alguien tiene noticias y lo confirma o me manda de paseo : creo que exec() se detiene cuando aparece un caracter 10 ó 13.
Me pareció haber visto que además de los clásicos i y g de las expresiones regulares, también hay un m que hace interpretar los saltos como parte de la cadena. Tendría que buscarlo y probar.
O seguir por el camino más compatible que tomé.
O dejar de perder el tiempo con algo que no sirve para nada...

P.D.: cómo los quiero, ahora tiene un poco más de sentido seguir viniendo al Foro. Hasta me estoy dejando pasar algunos post desubicados para encauzar, por seguir con estos!

emprear · #23 (**permalink**) 06/11/2012, 06:48

Cita:

Iniciado por furoya

P.D.: cómo los quiero, ahora tiene un poco más de sentido seguir viniendo al Foro. Hasta me estoy dejando pasar algunos post desubicados para encauzar, por seguir con estos!

Impresionante, a eso se le llama
"The Power of Love"

IsaBelM · #24 (**permalink**) 06/11/2012, 15:22

el modificar m permite varios principios (^) y finales ($)

hace unos días monté esto

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript">
function fnc(evt, valorAnterior) {
var valorActual = valorAnterior + String.fromCharCode(evt.keyCode);
var patr = /(^([a-z\xc0-\xff\s]*)$|^(\d*)$)/im;

if(pat.test(valorActual)) {
return true;
} else {
alert('o todos números o todos letras');
return false;
}

}
</script>
</head>
<body>

<form>
<textarea rows="5" cols="20" onkeypress="return fnc(event, this.value)"></textarea>
</form>

</body>
</html>

si se empieza usando letras, no se pueden insertar números y viceversa

con respecto a exec(), no lo he notado. tal vez por que nunca se me ha dado el caso

emprear, verás como al final lo amansamos un poco. o eso, o tiene una recaída de las gordas

furoya · #25 (**permalink**) 06/11/2012, 18:13

Cita:

Iniciado por IsaBelM

emprear, verás como al final lo amansamos un poco. o eso, o tiene una recaída de las gordas

Vos ocupate de no escribir código en etiquetas de cita. Que encima no se pueden re-citar.

Ya entiendo lo que es m, no creo que me sirva. ¿Y por qué C0 al FF?

Sí, sí; les escribo a ustedes y suena de fondo el tema cantado por Jennifer Rush ♪ ♫ (o el de Celine Dion. El de Huey Lewis seguro que no).

IsaBelM · #26 (**permalink**) 09/11/2012, 15:33

Cita:

Iniciado por furoya

Ya entiendo lo que es m, no creo que me sirva. ¿Y por qué C0 al FF?

la pregunta es ambigua. esperaré a que la reaformules para responder

algo en tiempo real o wysiwyg

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-Type" content="application/xhtml; charset=utf-8" />
<title></title> 
<style type="text/css"> 
#marco {
border: 1px grey solid;
width: 400px;
height: 200px;
overflow: auto;
counter-reset: numero_link;
}


#marco span.vinculo > a, #marco div#saltonumeracion > a {
color: red;
text-decoration: none;
}


#marco div#saltonumeracion > a[target]:before {
content: counter(numero_link) '. ';
counter-increment: numero_link;
color: blue;
font-weight: bold;
}


#txtarea {
display:none;
}
</style>

<script type="text/javascript">
function fnc(evt, elem){
if (evt.keyCode == 32) {
var reg = /((www)(\.)([\w-_\/\.]+))(?![\/">\w\.]|[<\/a>])/i;
var palabras = elem.innerHTML.split(/(\s+)/);

for (var i = 0; i <= palabras.length-1; i++) {

if (reg.test(palabras[i])) {
elem.innerHTML = elem.innerHTML.replace(reg, '<span class="vinculo"><a id="$1'+i+'" href="http://$1/">$1</a></span>');
}

}

}
}




function editable(bol) {
var elem = document.getElementById('marco');

if (!bol) {

var controlaidiotas = elem.getElementsByTagName('span');

if (controlaidiotas.length == 0) {return;} // no se han insertado vinculos
var div = elem.getElementsByTagName('div');
var span = elem.querySelectorAll('.vinculo');
for(var i = 0; i < span.length; i++) {

// se crea el salto de línea

var nuevoNodo = document.createElement('div');
nuevoNodo.setAttribute('id', 'saltonumeracion');
nuevoNodo.appendChild(span[i].firstChild);
elem.replaceChild(nuevoNodo, span[i]); // replaceChild sólo reemplaza hijos directos

// se crea la numeración

div[i].firstChild.setAttribute('target', '_blank');
}
elem.contentEditable = 'false';


} else {

var controlaidiotas = elem.getElementsByTagName('div');
if (controlaidiotas.length == 0) {return;} // no se han insertado vinculos
var span = elem.getElementsByTagName('span');
var div = elem.querySelectorAll('#saltonumeracion');
for(var i = 0; i < div.length; i++) {

// se elimina el salto de línea

var nuevoNodo = document.createElement('span');
nuevoNodo.setAttribute('class', 'vinculo');
nuevoNodo.appendChild(div[i].firstChild);
elem.replaceChild(nuevoNodo, div[i]);

// se elimina la numeración

span[i].firstChild.removeAttribute('target');
}
elem.contentEditable = 'true';

}
}
</script>  
</head>  
<body>

<form id="f" name="f" method="post" action="">
editar <input type="checkbox" id="chk" checked="checked" onclick="editable(this.checked)" />
<div id="marco" contenteditable="true" onkeyup="fnc(event, this)"></div>  
</form>  

</body>  
</html>

la numeración de los enlaces se hace con css (selector de atributo, :before, content y counter-increment) con lo que se puede volcar el contenido del div editable sobre un textarea y ser enviado

es cross-browser?? no, ie tiene un problema con que un elemento en línea sea contenedor de otro elemento en línea. no es un problema es sólo que lo trata como lo que es un vinculo. la línea de código a este respecto es

Cita:

elem.innerHTML = elem.innerHTML.replace(reg, '<span class="vinculo"><a id="$1'+i+'" href="http://$1/">$1</a></span>');

el comportamiento de los demás navegadores es relativamente aceptable. cuando se escribe una url el cursor vuelve a la posición 0 o a la posición del último reemplazo

se puede usar saltos de línea?? no, el método replaceChild() sólo reemplaza los descendientes directos. cuando se inserta un salto de línea, en el div, se representa con

Cita:

. si se continua escribiendo, el texto quedará envuelto en ese div

Cita:

<div>se ha producido un salto de línea</div>

con lo que su contenido no es descendiente directo del bloque contenedor. en este caso #marco

hay bastante mas observaciones que se pueden hacer sobre este código, por ejemplo; porqué uso querySelectorAll, porqué no uso insertBefore() y creo una función que emule insertAfter, porqué no uso insertAdjacentHTML(), etc... pero ahora no me apetece. si alguien está interesado que pregunte

emprear · #27 (**permalink**) 09/11/2012, 16:11

@IsabelM

Testeaste esa script?
La he probado en todos y lo único que consigo es que en IE (9/8/7) reconozca las urls escritas y las convierta en links (que por otra parte no funcionan como tales ya que el div sigue siendo en todo momento contenteditable, tildado o no el checkbox), en el resto de los navegadores no hace nada
De la numeración, ni noticias, en ningún caso.
Estoy pensando que quizás pegaste la versión que no era.

Errores, al menos ninguna consola indica alguno

Saludos

IsaBelM · #28 (**permalink**) 09/11/2012, 16:20

no, no, funciona.

quizás el problema es que no he explicado como funciona. es un wysiyg. escribe una url sin (http://) y después un texto. en cuanto escribas es primer carácter del texto, el color de la url será rojo. después deschequea el checkbox y la url se habrá convertido en un vinculo

emprear · #29 (**permalink**) 09/11/2012, 16:48

Cita:

Iniciado por IsaBelM

no, no, funciona.

quizás el problema es que no he explicado como funciona. es un wysiyg. escribe una url sin (http://) y después un texto. en cuanto escribas es primer carácter del texto, el color de la url será rojo. después deschequea el checkbox y la url se habrá convertido en un vinculo

Ahora es otra cosa, me descolocaba el no tener que escribir el http://

por lo pronto observo que la expresión solo reconoce urls comenzadas por www
Después la veo más en profundidad

Saludos

IsaBelM · #30 (**permalink**) 09/11/2012, 16:56

sí, he simplificado al máximo el patrón por que de otro modo se reemplazaba lo ya reemplazado.
si ya teníamos esto

Cita:

<a href="http://www.pagina.com/">www.pagina.com</a>

al escribir otra url, la primera encajaba en patrón y hacia algo como esto

Cita:

<a href="<a href="http://www.pagina.com/">">www.pagina.comwww.pagina.com</a></a>