Place JavaScript code generated by php function in a php variable then show on html page without executing

Question

I have following php function

<?php function searchbox_markup(){
$baseUrl = "example.com"; ?>
<script type="application/ld+json">
{
 "@context": "http://schema.org",
 "@type": "WebSite",
 "url": "<?php echo $baseUrl; ?>",
 "potentialAction": {
 "@type": "SearchAction",
 "target": "<?php echo $baseUrl . 'index.php?page=search&sPattern={search_term_string}'; ?>",
 "query-input": "required name=search_term_string"
 }
}
</script>
<?php } ?>

I want to display the output of above function on my page without executing JavaScript code contained in it, I tried the following but it do not display JavaScript code in html.

<?php
$snippet = '"' . searchbox_markup() . '"';
$htmlSnippet = "<pre>".htmlspecialchars($snippet)."</pre>";
echo $htmlSnippet;
?>

• Nikhil Vaghela: You do not store javascript value in php variable because of first run php script and then run javascript.
• Henders: What do you mean by '... and display on my page without executing'?
• Nikhil Vaghela: Possible duplicate of How to pass variables and data from PHP to JavaScript?
• Syed: I want to show the code part of my question on html page.
• Syed: @Nikhil Vaghla It is not duplicate, main part of my question is how to show JavaScript code in html.

Answer 1

If you are attempting to print Javascript code to the page you'll want to convert all of the characters which are HTML characters to be their HTML Symbol equivalents. To do this we can use htmlspecialchars().

If you wanted the structure to persist, so that it looks like the code you pasted into the question you'll need to wrap it in the relevant HTML tag. In this case, that would be <pre>. Previously, you could have also used <xmp> but this is now deprecated and its use is discouraged.

Putting all of this together:

$snippet = "<script type='application/ld+json'>
{
 '@context': 'http://schema.org',
 '@type': 'WebSite',
 'url': 'http://example.com/',
 'potentialAction': {
 '@type': 'SearchAction',
 'target': 'http://example.com/index.php?page=search&sPattern={search_term_string}',
 'query-input': 'required name=search_term_string'
 }
}
</script>";
$htmlSnippet = "<pre>".htmlspecialchars($snippet)."</pre>";

This code does the following:

• Takes the code you want to use and assigns it to a variable ($snippet) as a string (taking care to ensure the quotes do not break the string enclosure).
• Converts the $snippet using htmlspecialchars()
• Concatenates the HTML tags <pre> and </pre> around the output of htmlentities().
• Assign all of this to our $htmlSnippet PHP variable.

We could then echo this $htmlSnippet variable and end up with the output in your question printed to the page without it being interpreted as HTML.

---

Notes:

• You might want to consider using the <code></code> HTML tag instead because then you are explicitly stating that what is contained in that element is code and not anything else. It will also, by default, display the code in a different font.
• You could use htmlentities() instead of htmlspecialchars() depending on your circumstance. For more information check out this answer

---

Update:

After the update to your question, you appear to want to have this value returned by the function in your question. You would need to adjust your function to return this value as a string. Something like this would probably work:

function searchbox_markup(){
 $baseUrl = "example.com";
 $snippet = "<script type='application/ld+json'>
 {
 '@context': 'http://schema.org',
 '@type': 'WebSite',
 'url': '".$baseUrl."',
 'potentialAction': {
 '@type': 'SearchAction',
 'target': '".$baseUrl."'index.php?page=search&sPattern={search_term_string}',
 'query-input': 'required name=search_term_string'
 }
 }
 </script>";
 return $snippet;
}

To me, this looks messy. There is almost certainly a better way of solving the problem that you are trying to fix.

• Syed: thanks, your answer helped me a lot, please read the amended question again.
• Henders: @Syed It looks like a new question to me. My answer fits your initial question.
• Syed: yes, your answer is ok but it still do not show code snippet when I try to show output of my function.
• Henders: @Syed I've added an update to my answer but I would advise that you step back and look at the issue you are trying to fix because this doesn't look like an ideal setup to me.
• Syed: I highly appreciate your effort to make my function work, and it is working, but unfortunately it did not resolve my issue because as you said and I experienced it is really not an ideal setup. It is making my function more unmanageable. By the way I will accept your answer, and I will be happy if you provide an Ideal solution to my requirement.

Answer 2

use single quotes,

 $temp = '<script type="application/ld+json">
 {
 "@context": "http://schema.org",
 "@type": "WebSite",
 "url": "http://example.com/",
 "potentialAction": {
 "@type": "SearchAction",
 "target": "http://example.com/index.php?page=search&sPattern={search_term_string}",
 "query-input": "required name=search_term_string"
 }
 }
</script>';
echo '<pre>';
echo htmlspecialchars($temp);
echo '</pre>';

Answer 3

Use htmlspecialchars:

$jsCode = '<script type="application/ld+json">
 {
 "@context": "http://schema.org",
 "@type": "WebSite",
 "url": "http://example.com/",
 "potentialAction": {
 "@type": "SearchAction",
 "target": "http://example.com/index.php?page=search&sPattern={search_term_string}",
 "query-input": "required name=search_term_string"
 }
 }
</script>';
$jsToDisplay = htmlspecialchars($jsCode);

Answer 4

You can Use <xmp> tag.

In HTML

<xmp>
<script type="application/ld+json">
{
 "@context": "http://schema.org",
 "@type": "WebSite",
 "url": "http://example.com/",
 "potentialAction": {
 "@type": "SearchAction",
 "target": "http://example.com/index.php?page=search&sPattern={search_term_string}",
 "query-input": "required name=search_term_string"
 }
}
</script>
</xmp>

As you describe you want to save it in php variable so.

In php

$var='<xmp>
<script type="application/ld+json">
{
 "@context": "http://schema.org",
 "@type": "WebSite",
 "url": "http://example.com/",
 "potentialAction": {
 "@type": "SearchAction",
 "target": "http://example.com/index.php?page=search&sPattern={search_term_string}",
 "query-input": "required name=search_term_string"
 }
}
</script>
</xmp>';