Necesito ayuda para reemplazar coincidencias con expresiones regulares

[CHuLoSoY]

Hola amigos.

Tengo un problema gordo y es que no tengo ni idea ya de cómo hacerlo, lo intenté de mil maneras distintas. El caso es que tengo unos campos en una cadena de texto del uno al veinte tal que así:

{%c1%}
{%c2%}
....
{%c20%}

Necesito reemplazar cada uno de esos campos por el valor de unos input de texto con el mismo id (c1, c2... c20).

Lo que tengo hecho es lo siguiente:

Código Javascript:

textosplan[2]=textosplan[2].replace(/\{\%\w+\%\}/g, document.getElementById("cmpc1").value);
 

Funciona bien, pero no soy capaz de poner que getElementById("cmpc1") sea como getElementById("cmp"+coincidencia).

Lo he intentado con bucles, pero no acepta variables la expresión regular y no vale (o si que acepta y no encontré como hacerlo).

Encontré en una página que las coincidencias de las expresiones regulares en el método replace() se expresan ordenadamente con dólares: $1, $2. ... etc. Pero a mí no me funciona.

Alguien tiene alguna idea?

Mil gracias por adelantado.

[zerokilled]

el siguiente mensaje deberia darte una idea pero te recomiendo que leas el tema completo para que lo puedas comprender. http://www.forosdelweb.com/showthread.php?p=3459564

[CHuLoSoY]

Es decir que si uso esto:

Código Javascript:

textosplan[2]=textosplan[2].replace(/\{\%\w+\%\}/g, function(variable) { variable.replace("c", "");return variable+1; }
 

Debería funcionar?

[zerokilled]

no. la idea que debistes tomar era usar una funcion en lugar de un string. en tu expresion regular tienes que crear un grupo que solamente capture el ID. ese ID lo recibira la funcion. dentro de la funcion obtienes el campo por su ID y devuelve el valor contenido en este. la razon por la que no te funciona con el signo de dolar seguido del numero es porque el segundo argumento de replace tiene que ser explicitamente un string literal.

[CHuLoSoY]

Mira he probado esto:

Código Javascript:

textosplan[2]=textosplan[2].replace(/\{\%\w+\%\}/g, function(variable) { variable.replace("c", "");variable=Number(variable)+1;return document.getElementById("cmpc"+variable).value;});
 

pero me dice que document.getElementById("cmpc"+variable).value es null

edito
Perdón, no había leído tu respuesta. Realmente no entiendo nada. Se me dan horriblemente mal las expresiones regulares.

Vamos a ver, necesito leer sólo el id, sin el "c" y pasárselo a la función. Pero cómo?

[CHuLoSoY]

Lo siento, pero por más que intento sigo sin entender ni lograr que funcione nada. Sería más fácil si los hago sin la "c"?

{%1%}
{%2%}

etc?

Lo único que he logrado que funcione es " a machada ":

Código Javascript:

textosplan[2]=textosplan[2].replace(/\{\%c1\%\}/g, document.getElementById("cmpc1").value);
        textosplan[2]=textosplan[2].replace(/\{\%c2\%\}/g, document.getElementById("cmpc2").value);
        textosplan[2]=textosplan[2].replace(/\{\%c3\%\}/g, document.getElementById("cmpc3").value);
        textosplan[2]=textosplan[2].replace(/\{\%c4\%\}/g, document.getElementById("cmpc4").value);
        textosplan[2]=textosplan[2].replace(/\{\%c5\%\}/g, document.getElementById("cmpc5").value);
        textosplan[2]=textosplan[2].replace(/\{\%c6\%\}/g, document.getElementById("cmpc6").value);
        textosplan[2]=textosplan[2].replace(/\{\%c7\%\}/g, document.getElementById("cmpc7").value);
        textosplan[2]=textosplan[2].replace(/\{\%c8\%\}/g, document.getElementById("cmpc8").value);
        textosplan[2]=textosplan[2].replace(/\{\%c9\%\}/g, document.getElementById("cmpc9").value);
        textosplan[2]=textosplan[2].replace(/\{\%c10\%\}/g, document.getElementById("cmpc10").value);
        textosplan[2]=textosplan[2].replace(/\{\%c11\%\}/g, document.getElementById("cmpc11").value);
        textosplan[2]=textosplan[2].replace(/\{\%c12\%\}/g, document.getElementById("cmpc12").value);
        textosplan[2]=textosplan[2].replace(/\{\%c13\%\}/g, document.getElementById("cmpc13").value);
        textosplan[2]=textosplan[2].replace(/\{\%c14\%\}/g, document.getElementById("cmpc14").value);
        textosplan[2]=textosplan[2].replace(/\{\%c15\%\}/g, document.getElementById("cmpc15").value);
        textosplan[2]=textosplan[2].replace(/\{\%c16\%\}/g, document.getElementById("cmpc16").value);
        textosplan[2]=textosplan[2].replace(/\{\%c17\%\}/g, document.getElementById("cmpc17").value);
        textosplan[2]=textosplan[2].replace(/\{\%c18\%\}/g, document.getElementById("cmpc18").value);
        textosplan[2]=textosplan[2].replace(/\{\%c19\%\}/g, document.getElementById("cmpc19").value);
        textosplan[2]=textosplan[2].replace(/\{\%c20\%\}/g, document.getElementById("cmpc20").value);
 

Pero si tengo diferentes formularios es un incordio hacer de uno en uno.

[zerokilled]

1. captura el id del string en un grupo. en el patron, simplemente encierras la clase \w+ en un par de parentesis.
2. tu funcion va recibir varios parametros, pero el mas que te interesa es el segundo. para hacer referencia este segundo parametro, en la funcion puedes hacer una de dos:
   • nombrar los parametros (function(param1, param2, ...)) para que puedas hacer referencia por su nombre. o...
   • dentro de la funcion utilizas el array arguments el cual contiene referencia de todos los parametros pasado a la funcion. en tu caso, utilizarias el segundo elemento del array, arguments[1].
3. luego de haber decidido de que forma vas a leer el parametro, haces referencia al elemento por su ID. si tienes que agregar un string adicional al ID, lo concatenas. ejemplo, "campo"+arguments[1]... eso se lo pasas como argumento a getElementById. finalmente devuelve es valor del campo.

[CHuLoSoY]

Lo he probado con paramX y aguments y nada, el resultado es null:

Código Javascript:

textosplan[2]=textosplan[2].replace(/\{\%(\w+)\%\}/g, function(param1, param2) { document.getElementById("cmpc"+param2).value;});
 

Código Javascript:

textosplan[2]=textosplan[2].replace(/\{\%(\w+)\%\}/g, function() { document.getElementById("cmpc"+arguments[1]).value;});
 

Con return y sin return

Qué desesperación.

[zerokilled]

Qué desesperación.

ante ese comentario lo unico que puedo hacer es reirme. no desesperes, estas cerca. el problema es que estas generando un string que no concuerda con la ID. es decir, la variable captura cadenas como c1, c2, c3 y luego la concatenas con "cmpc" por tanto el resultado es cmpcc1. en rojo tienes el string literal y en verde tienes el valor de la variable. ¿es este el string que querias formar? supongo que tienes una c de mas. ya tu sabras lo que tienes que hacer.

Con return y sin return

por obligacion la funcion debe tener un return y debe devolver un string. en tu caso la propiedad value es un string, asi que no te hagas drama. si omites el return, la funcion devuelve undefined al metodo replace y por ende te cambia todo por undefined, no es lo que quieres.

[CHuLoSoY]

Pues no lo consigo ni de broma. Tampoco quitándole la "c":

Código Javascript:

textosplan[2]=textosplan[2].replace(/\{\%(\w+)\%\}/g, function() {  return document.getElementById("cmp"+arguments[1]).value;});
 

He probado con diferentes argumentos (0, 1, 2 y 3) y sigue diciendo que es null.
¿Cómo captura cadenas? He leído diferentes artículos y no lo doy entendido. Es decir, pasa a la función X argumentos basados en el patrón buscado no? Pero qué/cuántos argumentos y de qué forma, qué es lo que contienen?

Por otro lado, gracias por tu paciencia, ahí va mi karma.

Saludos

[zerokilled]

no veo por que te falla pero aqui va un ejemplo.

Código:

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN'
'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'><head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Test Development</title>
<script type='text/javascript'>
self.onload = function(){
alert("left {%c1%} right {%c2%}".replace(/\{%(\w+)%\}/g, function(){
return document.getElementById("cmp"+arguments[1]).value;
}));
};
</script>
<style type='text/css'>

</style>
</head>

<body>
<input id="cmpc1" value="center" />
<input id="cmpc2" value="final" />
</body></html>

[CHuLoSoY]

Muchas gracias por la pista, encontré uno de los fallos pero no doy hecho que reemplace.

Ahora mismo hice una prueba con alert y ya va PERO NO REEMPLAZA. Mi fallo principal era escapar el porcentaje (\%) y tú lo pusiste sin barra invertida con lo que no se escapa xD

Código Javascript:

textosplan[2]=textosplan[2].replace(/\{%(\w+)%\}/g, function() { 
alert( document.getElementById("cmp"+arguments[1]).value);
});
 

Me va dando alerts con los valores correctos de los campos, pero no los reemplaza en la cadena textosplan[2]!!!!!!

Ya no sé qué hacer xD dos días enteros para esta chorrada.

The code:

Código Javascript:

textosplan[2]=textosplan[2].replace(/\{%(\w+)%\}/g, function() {  alert( document.getElementById("cmp"+arguments[1]).value);});
 
    document.getElementById("cmptextopersonalizado2").value=textosplan[2];
    document.getElementById("capaMostrarCamposestudio").style.display="none";
 

[zerokilled]

reitero lo que te comente acerca del return. si no devuelves un valor en la funcion, el string es reemplazado por undefined.

[CHuLoSoY]

Ya lo tengo con return, pero no reemplaza NADA, se quedan los campos como están {%cX%} sin reemplazar, a no ser que lo ponga a mano que sí reemplaza, pero necesito hacer cientos de formularios y no voy a hacerlos todos a mano no?

Código Javascript:

/* SÍ FUNCIONA */
        textosplan[2]=textosplan[2].replace(/\{\%c1\%\}/g, document.getElementById("cmpc1").value);
        textosplan[2]=textosplan[2].replace(/\{\%c2\%\}/g, document.getElementById("cmpc2").value);
        textosplan[2]=textosplan[2].replace(/\{\%c3\%\}/g, document.getElementById("cmpc3").value);
        textosplan[2]=textosplan[2].replace(/\{\%c4\%\}/g, document.getElementById("cmpc4").value);
        textosplan[2]=textosplan[2].replace(/\{\%c5\%\}/g, document.getElementById("cmpc5").value);
        textosplan[2]=textosplan[2].replace(/\{\%c6\%\}/g, document.getElementById("cmpc6").value);
        textosplan[2]=textosplan[2].replace(/\{\%c7\%\}/g, document.getElementById("cmpc7").value);
        textosplan[2]=textosplan[2].replace(/\{\%c8\%\}/g, document.getElementById("cmpc8").value);
        textosplan[2]=textosplan[2].replace(/\{\%c9\%\}/g, document.getElementById("cmpc9").value);
        textosplan[2]=textosplan[2].replace(/\{\%c10\%\}/g, document.getElementById("cmpc10").value);
        textosplan[2]=textosplan[2].replace(/\{\%c11\%\}/g, document.getElementById("cmpc11").value);
        textosplan[2]=textosplan[2].replace(/\{\%c12\%\}/g, document.getElementById("cmpc12").value);
        textosplan[2]=textosplan[2].replace(/\{\%c13\%\}/g, document.getElementById("cmpc13").value);
        textosplan[2]=textosplan[2].replace(/\{\%c14\%\}/g, document.getElementById("cmpc14").value);
        textosplan[2]=textosplan[2].replace(/\{\%c15\%\}/g, document.getElementById("cmpc15").value);
        textosplan[2]=textosplan[2].replace(/\{\%c16\%\}/g, document.getElementById("cmpc16").value);
        textosplan[2]=textosplan[2].replace(/\{\%c17\%\}/g, document.getElementById("cmpc17").value);
        textosplan[2]=textosplan[2].replace(/\{\%c18\%\}/g, document.getElementById("cmpc18").value);
        textosplan[2]=textosplan[2].replace(/\{\%c19\%\}/g, document.getElementById("cmpc19").value);
        textosplan[2]=textosplan[2].replace(/\{\%c20\%\}/g, document.getElementById("cmpc20").value);
    /* NO FUNCIONA:*/
    textosplan[2]=textosplan[2].replace(/\{\%(\w+)\%\}/g, function() { 
return document.getElementById("cmp"+arguments[1]).value;
});
 
    document.getElementById("cmptextopersonalizado2").value=textosplan[2];
    document.getElementById("capaMostrarCamposestudio").style.display="none";
 

[zerokilled]

la verdad lo tuyo parece un caso especial y unico. si subes una prueba -la version que no te funciona- a un hosting e indica la url, puede que me anime a hecharle un ojo.

[CHuLoSoY]

Está subido pero tal vez sea un poco complicado de entrar.
Te envío las instrucciones por mensaje privado ok?

Por cierto, siempre me tocan los casos especiales de getElementById nulos, aunque existan. Tuve un problema con todos estos campos cmpXXX que al principio los ids eran solo XXX y no los localizaba, y les tuve que poner cmp delante xD
Saludos

Edito: No se puede ;)
Tal vez por email?

[zerokilled]

estuve revisando y puedo confirmarte que los cambios los realiza correctamente. sin embargo, me fije que en el codigo original tienes una variable temporera donde vas almacenando los cambios. pero con la solucion que te proponia no estas almacenando los cambios. a continuacion una muestra.

Código:

// codigo original;
txttmp=txttmp.replace(/\{\%c1\%\}/g, document.getElementById("cmpc1").value);

// codigo propuesto;
missing_variable  txttmp.replace(/\{\%(\w+)\%\}/g, function() {  return document.getElementById("cmp"+arguments[1]).value;});

a mi me funciono almacenando los cambios y operando desdes la variable txttmp. la previsualizacion me muestra todos los campos qu habia llenado.