The problem
I have a string like this (containing: both single and double quotes).
She said: "Hey! That's my bike!!"
I need it to be a title in a Vue component. I could pass it into a slot, but for other reasons, it would be awesome if I could pass it into a prop, as such:
<?php
$title = "She said: \"Hey! That's my bike!!\""
?>
<page-object
title="<?php echo $title; ?>"
>
</page-object>
Solution-attempts
Attempt1: I've tried escaping the quotation-marks, but that doesn't work. Like this:
<page-object
title="Hey, single quote: ' and double quote: \" ... Doesn't work!"
>
</page-object>
Attempt2: I could live without double-quotes, and do something like this:
<?php
$title = "She said: \"Hey! That's my bike!!\""
$title = str_replace( '"', "'", $title );
?>
<page-object
title="<?php echo $title; ?>"
>
</page-object>
... but it's not ideal, since it's the end-users setting that page title. So it's kinda crap disallowing/automatically replacing this one (quite oftenly used) character.
Attempt3: JSON-encode it, but that generates a long string and I need to utilize the solution from attempt2, in order to make this work anyway. So it still doesn't make it possible to have both single and double quotes in the page titles.
Ideally, I'm looking for a magical function, that I can run any string through in PHP, outputting a JSON-object. That I can then pass as a prop and parse inside my Vue Component, ensuring that both single and double quotes can squeeze through that keyhole.
