Pasar una variable de PHP a una variable de JavaScript

7 minutos de lectura

Avatar de usuario de David Laing
david laing

¿Cuál es la forma más fácil de codificar una cadena de PHP para generar una variable de JavaScript?

Tengo una cadena PHP que incluye comillas y saltos de línea. Necesito que el contenido de esta cadena se coloque en una variable de JavaScript.

Normalmente, solo construiría mi JavaScript en un archivo PHP, a la:

<script>
  var myvar = "<?php echo $myVarValue;?>";
</script>

Sin embargo, esto no funciona cuando $myVarValue contiene comillas o líneas nuevas.

  • Solo quería señalar que puedes usar utf8_encode() antes de pasar la cadena a json_encode. Eso es lo que estoy haciendo: echo json_encode(utf8_encode($msg));

    – carlosvini

    11/09/2013 a las 18:00


  • Esto es no un duplicado de stackoverflow.com/questions/23740548/…. Este último habla sobre AJAX, etc. y cuestiones de redes, mientras que aquí se trata de codificar/escape/comillas y saltos de línea. ¿Reabrimos? (Por cierto, aquí lo aceptado es corto, funciona bien y tiene muchos cientos de votos)

    – Basj

    1 de diciembre de 2021 a las 12:19


avatar de usuario de bobwienholt
bobwienholt

Ampliando la respuesta de otra persona:

<script>
  var myvar = <?= json_encode($myVarValue, JSON_UNESCAPED_UNICODE); ?>;
</script>

Usando json_encode() requiere:

  • PHP 5.2.0 o superior
  • $myVarValue codificado como UTF-8 (o US-ASCII, por supuesto)

Dado que UTF-8 es compatible con Unicode completo, debería ser seguro convertir sobre la marcha.

Tenga en cuenta que si usa esto en atributos html como onclick, debe pasar el resultado de json_encode a htmlspecialchars(), como se muestra a continuación:

htmlspecialchars(json_encode($string), ENT_QUOTES);

o de lo contrario podría tener problemas con, por ejemplo, &bar; en foo()&&bar; siendo interpretado como una entidad HTML.

  • Si usa UTF-8, esa es la mejor solución con diferencia.

    – Kornel

    13 de octubre de 2008 a las 23:02

  • Es importante que la implementación de json_encode escape a la barra inclinada. Si no fuera así, esto no funcionaría si $myVarValue fuera ““. Pero json_encode escapa de las barras diagonales, por lo que estamos bien.

    – Drew LeSueur

    1 oct 2010 a las 19:40


  • Si no tiene 5.2, pruebe jsonwrapper de boutell.com boutell.com/scripts/jsonwrapper.html

    – Tom Auger

    22 de diciembre de 2010 a las 22:57


  • Tenga en cuenta que si usa esto en onclick atributos y similares, necesita pasar el resultado de json_encode a htmlspecialcharscomo el siguiente: htmlspecialchars(json_encode($string),ENT_QUOTES,'utf-8') o de lo contrario podría tener problemas con, por ejemplo, &bar; en foo()&&bar; siendo interpretado como una entidad HTML.

    – usuario2428118

    2 de junio de 2014 a las 14:09

  • @hakre: Pero cómo contiene la cadena PHP "...</script>..." puede convertirse en JS sin cadena </script> en lugar de solo cadena JS "...</script>..." después de json_encode de PHP? Siempre agrega comillas para cadena. Entonces, var x = "...</script>..."; es solo una cadena JS. Sin descanso.

    – Tormenta de llamas

    27 de julio de 2017 a las 14:21


codificarlo con JSON

  • Probablemente la forma más fácil de hacer que esto funcione el 100% del tiempo. Hay demasiados casos para cubrir de otra manera.

    – diré qué

    3 de octubre de 2008 a las 18:42

  • Json solo funciona con UTF-8 Charset. Por lo tanto, no es una solución si su sitio web funciona con una codificación que no es UTF-8

    – Nir

    27 de abril de 2009 a las 12:06

  • @nir: por un lado, no conozco ninguna razón para usar ninguna otra codificación, por otro lado, un codificador JSON completo también administra cualquier conversión de juego de caracteres necesaria

    – Javier

    28 de abril de 2009 a las 2:03

  • Codificarlo con JSON no es suficiente, también debe asegurarse de que cualquier cadena Javascript que contenga </script> (sin distinción entre mayúsculas y minúsculas) se trata correctamente.

    – Flamm

    13 de noviembre de 2015 a las 15:03

  • La codificación de un solo valor escalar con JSON no lo forzará a un objeto, solo obtendrá una cadena utf-8. Por ejemplo, digamos que su código php se ve así: $x=”“; y su HTML se ve así: el resultado de la navegación será: Tenga en cuenta las comillas dobles y la barra inclinada con escape.

    –Craig Jacobs

    07/01/2017 a las 21:20

function escapeJavaScriptText($string)
{
    return str_replace("\n", '\n', str_replace('"', '\"', addcslashes(str_replace("\r", '', (string)$string), "\0..\37'\\")));
}

  • Necesitaba este porque estaba usando el contenido de la variable como parte de una expresión javascript concatenada.

    -Phil Cairns

    22 de febrero de 2018 a las 20:27

  • Esto realmente me ayudó.

    – Austin

    17 de febrero de 2019 a las 3:37

He tenido un problema similar y entiendo que la siguiente es la mejor solución:

<script>
    var myvar = decodeURIComponent("<?php echo rawurlencode($myVarValue); ?>");
</script>

sin embargo, el enlace que micahwittman publicó sugiere que hay algunas diferencias menores de codificación. PHP rawurlencode() se supone que la función debe cumplir RFC 1738mientras que parece que no hubo tal esfuerzo con Javascript decodeURIComponent().

avatar de usuario de giraff
jirafa

La versión paranoica: Escapando de cada personaje.

function javascript_escape($str) {
  $new_str="";

  $str_len = strlen($str);
  for($i = 0; $i < $str_len; $i++) {
    $new_str .= '\\x' . sprintf('%02x', ord(substr($str, $i, 1)));
  }

  return $new_str;
}

EDITAR: La razón por la cual json_encode() puede no ser apropiado es que a veces, es necesario prevenir " a generar, por ejemplo

<div onclick="alert(???)" />

  • Escapar de cada personaje funcionó para mí. json_encode no maneja muy bien las barras invertidas. Si necesita pasar algo como una expresión regular de mysql a javascript como parámetro, esta parece ser la mejor manera.

    – Ekim

    22 de mayo de 2012 a las 4:05

  • @kristoffer-ryhl comenta correctamente que dechex no funciona para '\t' (= '\x08'), así que lo edité para usar sprintf. Sin embargo, esto todavía no parece funcionar para los caracteres UTF-8 (esto requeriría usar '\u' en su lugar) ...

    – jirafa

    8 de noviembre de 2015 a las 12:47

  • Para un atributo HTML, podrías hacer <div onclick="alert(<?php echo htmlspecialchars(json_encode($var));?>" />

    – Flamm

    13 de noviembre de 2015 a las 14:55

  • Esto no es guardar Unicode, mira esto: docs.laminas.dev/laminas-escape/escape-javascript

    – vinsa

    28 de mayo de 2020 a las 16:46

Avatar de usuario de Salman A
salman a

<script>
var myVar = <?php echo json_encode($myVarValue); ?>;
</script>

o

<script>
var myVar = <?= json_encode($myVarValue) ?>;
</script>

  • Escapar de cada personaje funcionó para mí. json_encode no maneja muy bien las barras invertidas. Si necesita pasar algo como una expresión regular de mysql a javascript como parámetro, esta parece ser la mejor manera.

    – Ekim

    22 de mayo de 2012 a las 4:05

  • @kristoffer-ryhl comenta correctamente que dechex no funciona para '\t' (= '\x08'), así que lo edité para usar sprintf. Sin embargo, esto todavía no parece funcionar para los caracteres UTF-8 (esto requeriría usar '\u' en su lugar) ...

    – jirafa

    8 de noviembre de 2015 a las 12:47

  • Para un atributo HTML, podrías hacer <div onclick="alert(<?php echo htmlspecialchars(json_encode($var));?>" />

    – Flamm

    13 de noviembre de 2015 a las 14:55

  • Esto no es guardar Unicode, mira esto: docs.laminas.dev/laminas-escape/escape-javascript

    – vinsa

    28 de mayo de 2020 a las 16:46

Avatar de usuario de SLaks
SLaks

La solución de Micah a continuación funcionó para mí ya que el sitio que tenía que personalizar no estaba en UTF-8, por lo que no podía usar json; Votaría a favor, pero mi reputación no es lo suficientemente alta.

function escapeJavaScriptText($string) 
{ 
    return str_replace("\n", '\n', str_replace('"', '\"', addcslashes(str_replace("\r", '', (string)$string), "\0..\37'\\"))); 
} 

  • ¡Yo también! Estas dos líneas de código son lo mejor que le pasó a php (al menos en mi humilde opinión). ¡¡Muchas gracias!!

    – rizalp1

    26 de octubre de 2012 a las 3:44

¿Ha sido útil esta solución?