Develop Reference

Formatting PHP text for use in Javascript variable

I am having a tough time covering all areas with special chars that could possibly break the variable in JavaScript. So for context I am pulling information from a database and then echoing it to JavaScript variable that will display the data which is text that has been entered by a user and stored to the table.
The php variable is $letter see the code below that I used to try to keep it from breaking
$letter = $order["letter"];
$letter = str_replace("'", "\'", $letter);
$letter = str_replace("\"", "\"", $letter);
$letter = str_replace("\r\n", "\\n",$letter);
Below is the line of code where I attempt to decode it so that it will display in an html format
$(".fa-eye").click(function () {
//clear pager html
$(".pager").html('');
$("#text-pager").html('<p class="text-left prevdescription"></p>');
//clear pager html
var parentTd = $(this).parent().parent('td');
var letterContent = parentTd.find('#letterTxt').val();
var pagerHtml = '<p class="controls"><a class="tp-control-arrow-left unactive"><span><</span></a><a class="tp-control-arrow-right"><span>></span></a><ul class="pager"></ul></p>';
$(".prevdescription").html(letterContent.replace(/\r?\n/g, '<br/>'));
It produces the output in the image below...what am I missing?
You may write me down in history\nWith your bitter, twisted lies,\nYou may tread me in the very dirt\nBut still, like dust, I\ ............. This is what it outputs. not showing all of the content.

Use json_encode(), it converts a PHP value to the equivalent JavaScript literal.
<script>
var letter = <?php echo json_encode($order['letter']); ?>;
</script>

If a parameter of event handler contains certain characters, JavaScript does not execute properly

php:
$str1 = "AAA\r\nBBBB\\CCC";
echo"<textarea id='aa1' onfocus='erase(\"".$str1."\", \"aa1\");'></textarea>";
$str2 = "AAABBBB\\CCC";
echo"<textarea id='aa2' onfocus='erase(\"".$str2."\", \"aa2\");'></textarea>";
$str3 = "AAABBBB\CCC";
echo"<textarea id='aa3' onfocus='erase(\"".$str3."\", \"aa3\");'></textarea>";
$str4 = "AAABBBBCCC";
echo"<textarea id='aa4' onfocus='erase(\"".$str4."\", \"aa4\");'></textarea>";
javascript:
function erase(str, id)
{
alert("good");
var field = document.getElementById(id);
if(field.value == str)
{
field.value = '';
}
}
If I click on textarea id='aa1', nothing happens.
If I click on textarea id='aa2' or textarea id='aa3', 'good' is printed but nothing happens to field.value.
If I click on textarea id='aa4', 'good' is printed and field.value is ''.
I want a string like AAA\r\nBBBB\\CCC to work like textarea id='aa4.
How can I do that?
I read the post below but it does not seem to help my situation:
Javascript parameter
Javascript Line Break Textarea
update:
I've replaced $str1 with json_encode($str1), So alert(); works fine now. (Thanks to Jordan Running.)
But the field.value part still does not work.
code refactoring is too hard in my situation... Is there any way to handle the field.value problem without code refactoring?
If quotes corrupt my HTML, I can putting $str1 in htmlspecialchars() and displaying it in <textarea>.

Generally speaking it's a bad idea to use string concatenation to build JavaScript. Your PHP code produces the following HTML:
<textarea id='aa1' onfocus='erase("AAA
BBBB\CCC", "aa1");'></textarea>
That's valid HTML, but the code in your onfocus attribute is not valid JavaScript. In JavaScript, you can't have a line break in the middle of a string literal. You can have a line break in a template literal (i.e. `one of these`), but that's not the right solution here.
A quick but short-sighted fix
When you need to "inject" some data into a block of JavaScript, you should always use json_encode:
$str1 = "AAA\r\nBBBB\\CCC";
echo "<textarea id='aa1' onfocus='erase(" . json_encode($str1) . ", \"aa1\");'></textarea>";
Make careful note of the quotation marks above. Because json_encode wraps strings in quotation marks, you don't need additional quotes around . json_encode($str1) ..
This will produce the following HTML:
<textarea id='aa1' onfocus='erase("AAA\r\nBBBB\\CCC", "aa1");'></textarea>
...whose onfocus handler works correctly, as you can see in this snippet:
function erase(...args) { console.log('erase called with', args); }
<textarea id='aa1' onfocus='erase("AAA\r\nBBBB\\CCC", "aa1");'></textarea>
A better way
The above is still fragile. What if your data has a ' in it? That'll break your HTML. The correct solution is to move your data out of the HTML entirely. Consider if you refactored your code to look something like this:
<textarea id="aa1"></textarea>
<textarea id="aa2"></textarea>
<textarea id="aa3"></textarea>
<textarea id="aa4"></textarea>
<?php
$erase_map = [
'aa1' => "AAA\r\nBBBB\\CCC",
'aa2' => "AAABBBB\\CCC",
'aa3' => "AAABBBB\CCC",
'aa4' => "AAABBBBCCC",
];
?>
<script>
const ERASE_MAP = <?php echo json_encode($erase_map); ?>;
function erase(event) {
if (event.target.value == ERASE_MAP[event.target.id]) {
event.target.value = '';
}
}
document.querySelectorAll('textarea').forEach(textarea => textarea.addEventListener('focus', erase));
</script>
In the above code, all of the data is in one place—a single associative array—instead of scattered around your HTML. It generates HTML code with a <script> tag into which the data is injected as a JSON object and assigned to a JavaScript variable:
<textarea id="aa1"></textarea>
<textarea id="aa2"></textarea>
<textarea id="aa3"></textarea>
<textarea id="aa4"></textarea>
<script>
const ERASE_MAP = {"aa1":"AAA\r\nBBBB\\CCC","aa2":"AAABBBB\\CCC","aa3":"AAABBBB\\CCC","aa4":"AAABBBBCCC"};
function erase(event) {
if (event.target.value == ERASE_MAP[event.target.id]) {
event.target.value = '';
}
}
document.querySelectorAll('textarea').forEach(textarea => textarea.addEventListener('focus', erase));
</script>

javascript adding to string not wokring

Im trying to get a link where I have to add a countrycode to a link.
Im trying this:
var link = "http://restcountries.eu/rest/v1/alpha?codes=" + myData;
Where myData is defined by:
var div = document.getElementById("dom-target");
var myData = div.textContent;
dom-target:
<div id="dom-target" style="display: none;">
<?php
$output = $_GET['id'];
echo htmlspecialchars($output);
?>
</div>
Where the $_GET['id'] is a code like FR or NL.
but for some reason when I console.log() it, it comes out with the link and underneath that I see the countrycode, indicating that it hasnt added the countrycode to the link.
Am I doing something wrong here?

var link = "http://restcountries.eu/rest/v1/alpha?codes=" + myData.trim();
the .trim() will remove and spaces
if that doesn't work you can try myData.replace(/(\r\n|\n|\r)/gm,""); this will remove line breaks.
good luck

Strings with double quotes in html input field displaying as &quot

Im getting data from sql and using php to generate javascript for an edit button for each entry. The edit interface uses a text input in a form. When the generated edit button is clicked, the text within this field is set to equal the name of the entry from sql.
This works fine in all cases expect when the name contains double quotes ("), in which case the quotes are replaced with &quot in the text field.
The php genertaed javascript is below:
function editButton($suffix,$name)
{
echo "<button class=\"edit\" onclick=\"editMode$suffix()\">Edit</button>";
echo "<script>
<!--
function editMode$suffix(){
document.getElementById(\"title\").innerHTML = \"Edit Artist\"
var main = document.getElementById(\"main\");
main.style.display = 'none';
var edit = document.getElementById(\"edit\");
edit.style.display = 'block';
//Set the input of the edit interface to be equal to the current name
document.getElementById(\"editInput\").value = \"$name\";
document.getElementById(\"artEdit\").value = \"$name\";
}
-->
</script>";
}
The $name variable is sanitized via htmlentities() before being passed to the function. Without doing so, the edit interface for entries with quotes will not even display.
I found this which sounds like the same issue but no solutions (https://code.google.com/archive/p/embeddedjavascript/issues/19) :/
IF anyone has a solution or can point out some stupid thing im doing thats causing this it would be very appreciated. At this point im going to have to just disable database entry for double quotes and limit to singles.

Just change all the double-quotes in the JavaScript portion to single-quotes, then use addslashes() on the $name variable:
function editButton($suffix, $name)
{
$name = addslashes( html_entity_decode($name) );
echo "<button class='edit' onclick='editMode$suffix()'>Edit</button>";
echo "<script>
<!--
function editMode$suffix() {
document.getElementById('title').innerHTML = 'Edit Artist'
var main = document.getElementById('main');
main.style.display = 'none';
var edit = document.getElementById('edit');
edit.style.display = 'block';
//Set the input of the edit interface to be equal to the current name
document.getElementById('editInput').value = '$name';
document.getElementById('artEdit').value = '$name';
}
-->
</script>";
}
*Also added html_entity_decode() to converts the entities back to their initial state. Consider removing the htmlentities() altogether, in which case, you can remove the html_entity_decode() from the above script.

Why is my jQuery .css function not working?

I'm building some kind of add/remove taglist that is connected with mySQL. I've managed to get the tags from the database to display with a ajax call, but i can't do any kind of operation to them. Not even a common style. When i check with Firebug all the html seems to be in place so i can't figure out what's wrong. Here is my code:
jQuery:
$(document).ready(function() {
$("#ontvangenjson").css("border","3px solid red");
$.getJSON("jason2.php", function(data) {
$.each(data, function(){
var merkTag = " <a class=\"deletemerk\" href="+"http://localhost/website/remove_merk.php?id="+this.pkFavorietemerken+">" + this.merken + "</a>";
$("#ontvangenjson").append(merkTag);
});
});
});
PHP: jason2.php
$merken_lijst = "SELECT favorietemerken.pkFavorietemerken, favorietemerken.merken FROM favorietemerken JOIN bedrijven ON bedrijven.pkBedrijvenID=favorietemerken.fkBedrijvenID WHERE favorietemerken.fkBedrijvenID=$neem_id";
$rows = array();
$sth = mysql_query($merken_lijst);
while($r = mysql_fetch_assoc($sth)) {
$rows[] = $r;
}
print json_encode($rows);
RECEIVED JSON:
[{"pkFavorietemerken":"71","merken":"Nike"},{"pkFavorietemerken":"70","merken":"Le Coq Sportif"},{"pkFavorietemerken":"69","merken":"Converse"},{"pkFavorietemerken":"68","merken":"Champion"},{"pkFavorietemerken":"67","merken":"Adidas"}]
HTML:
<body>
<h1><label for="brands-form-brand">Get JSON data</label> <input type="button" id="knop" value="get JSON" /></h1>
<hr />
<p class="section-title"><strong>JSON Data received</strong></p>
<div id="ontvangenjson"> </div>
</body>
ANSWER
After alot, alot,alot of research I've finaly solved this problem. The code wasn't really wrong but a piece of it was misplaced. The get.JSON is asynchronous meaning if you want to make any changes using the jQuery .css function you will need to do that inside the callback for the getJSON.
$.getJSON("jason2.php", function(data) {
var merkTag = "";
$.each(data, function(){
merkTag += " <a class=\"deletemerk\" href="+"http://localhost/website/remove_merk.php?id="+this.pkFavorietemerken+">" + this.merken + "</a>";
});
$("#ontvangenjson").append(merkTag);
// NEW CODE
$(".deletemerk").css("border","3px solid red");
});

Shorthand properties (such as border) are not supported by jQuery.css().
http://api.jquery.com/css/

If you want to use all the three properties of border, try defining them independently , it might solve your problem.

I'm not sure this will solve your problem, but I would start by trying to clean up the way you're making that link. You may have missed one or two quotes. Instead of the confusion of escaping or failing to escape double quotes, just surround your string with single quotes:
var merkTag = '<a class="deletemerk" href="http://localhost/website/remove_merk.php?id='
+ this.pkFavorietemerken
+ '">'
+ this.merken
+ '</a>';
This leaves you free to use double quotes when you're building an HTML string. I've used multiple lines here just for clarity's sake. Clarity over brevity.