I'm curious as to why the presence of CR in a string would break a javascript. I want to pass a PHP array and the most simple solution to do this seemed to be to pass on a string representation of the array.

<?php
// $string_of_array will contain CRs (0xa) and using this in the javascript breaks it
$string_of_array = $people_str = addcslashes(var_export($array, true), "'");


// remove CRs and it's fine to use in the javascript
$string_that_works = $people_str = str_replace(chr( 0xa), "", $people_str);
?>

<script type=text/javascript>
parseArray(array_in) {
   var text_here = document.getElementById('some_input_of_type_text);
   text_here.value = array_in;
}


I'd appreciate if someone could tell me why the code breaks when the string sent to the javascript contains CRs.

    Can you give more info on exactly what breaks when the CR is in there? Is there a specific JavaScript error generated?

    My hunch (and take it with a grain of salt as I'm not a JS expert) is that if PHP is outputting a CR character into a point in a JavaScript string literal where you would use '\r' to represent a CR, it might be problematic. If that is the case, then you might need to do a replace of all CR's to be '\r' (using single quotes, not double, in the PHP so that it is not treated as a carriage return).

      I'm completely fresh when it comes to javascripts and previously only tried running it through a browser which didn't display script errors. When I made the script error appear (unterminated string constant), the line numbers didn't match up, which made me ask the browser to display the page source.
      And suddenly the answer is obvious:
      0xa is retained and treated as an actual new line in any script and only disregarded by the browser for output.

      Snippet from view page source

      		// this is a string with 0xa removed
		if (input.options[input.selectedIndex].value == 0) {
				first.value = 'array (  1 =>   array (    \'fName\' => \'Jane\',    \'phone\' => \'555 - 5555\',  ),  2 =>   array (    \'fName\' => \'John\',    \'phone\' => \'555 - 4444\',  ),)';
				second.value = "";
			}
			// this string still has 0xa
			else if (input.options[input.selectedIndex].value == 1) {
				first.value = "";
				second.value = 'array (
  1 => 
  array (
    \'fName\' => \'Jane\',
    \'phone\' => \'555 - 5555\',
  ),

      And the full code for testing purposes:

      <?php
	$people = array( 1 => array('fName' => "Jane", 'phone' => "555 - 5555"),
					 2 => array('fName' => "John", 'phone' => "555 - 4444"));

// create a string from array data, escape single quotes
$bad_str = addcslashes(var_export($people, true), "'");

// remove all CRs
$ok_str = str_replace(chr( 0xa), "", $bad_str);

?>

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional-.dtd">
<html>
 <head>
 	<script type="text/javascript">
		function setTextNoParams() {
			var input = document.getElementById('input');
			var first = document.getElementById('first');
			var second = document.getElementById('second');
			if (input.options[input.selectedIndex].value == 0) {
				first.value = '<?php echo $ok_str; ?>';
				second.value = "";
			}
			else if (input.options[input.selectedIndex].value == 1) {
				first.value = "";
				// problem here...
				second.value = '<?php echo $bad_str; ?>';	// breaks entire script
			}
			else {
				first.value = "---";
				second.value = "---";
			}
		}



	function setText(bad_str, ok_str) {
		var input = document.getElementById('input');
		var first = document.getElementById('first');
		var second = document.getElementById('second');
		if (input.options[input.selectedIndex].value == 0) {
			first.value = bad_str;
			second.value = "";
		}
		else if (input.options[input.selectedIndex].value == 1) {
			first.value = "";
			second.value = ok_str;

		}
		else {
			first.value = "---";
			second.value = "---";
		}
	}

</script>

 </head>



 <body>

 <table border="0pt">
 	<tr>
 		<td>Input</td>
 		<td>First</td>
 		<td>Second</td>
 	</tr>
 	<tr>
		<td>
		 	<select id="input"
				<?php  /* using the line below breaks the entire script due to the $bad_str
							onchange="setText('<?php echo $bad_str;?>', '<?php echo $ok_str; ?>')">
					    */
				?>
				onchange="setTextNoParams()">
			 		<option value="-1" selected>None</option>
			 		<option value="0">First</option>
			 		<option value="1">Second</option>
		 	</select>
	 	</td>
	 	<td><input type="text" id="first"></td>
	 	<td><input type="text" id="second"></td>
 	</tr>
</table>
 </body>

      Thanks a lot 🙂

        Write a Reply...