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;
?>

You do not store javascript value in php variable because of first run php script and then run javascript. — Nikhil Vaghela, Aug 23 '16 at 11:08
What do you mean by '_... and display on my page without executing_'? — Henders, Aug 23 '16 at 11:08
Possible duplicate of [How to pass variables and data from PHP to JavaScript?](http://stackoverflow.com/questions/23740548/how-to-pass-variables-and-data-from-php-to-javascript) — Nikhil Vaghela, Aug 23 '16 at 11:10
@Nikhil Vaghla It is not duplicate, main part of my question is how to show JavaScript code in html. — Syed, Aug 23 '16 at 11:15
Your code is just a piece of linked data. It won't execute by itself anyway. — Capital C, Aug 23 '16 at 11:18
@Capital C you are right, but I want to show it on html page. — Syed, Aug 23 '16 at 11:20
So you are trying to display the actual code on the page like a code snippet kind of thing? — Henders, Aug 23 '16 at 11:20

score 4 · Accepted Answer · edited Jun 20 '20 at 09:12

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.

thanks, your answer helped me a lot, please read the amended question again. — Syed, Aug 23 '16 at 13:47
@Syed It looks like a new question to me. My answer fits your initial question. — Henders, Aug 23 '16 at 13:49
yes, your answer is ok but it still do not show code snippet when I try to show output of my function. — Syed, Aug 23 '16 at 13:53
@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. — Henders, Aug 23 '16 at 14:23
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. — Syed, Aug 24 '16 at 12:26

score 1 · Answer 2 · answered Aug 23 '16 at 11:53

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>';

score 0 · Answer 3 · answered Aug 23 '16 at 11:20

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);

score 0 · Answer 4 · answered Aug 23 '16 at 11:25

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>';

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

4 Answers4

Notes:

Update: