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. <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.