如何在Javascript字符串中转义斜线？

Question

在一个我称为file-a.php的文件中，我创建了一个短代码，该短代码打印以下（简化的）HTML标记：

<div><a href="#"><span>Link text</span></a></div>

在file-b.php中，我恢复了[shortcode]并将其放入javascript变量中：

var myvariable = "<?php print do_shortcode('[shortcode]'); ?>";

这是我打印“ myvariable”时得到的HTML标记：

<div><a href="#"><span>Link text

实际上，当检测到第一个“ /”时，标记将中断。

我尝试咨询一些资源，但尚未找到任何解决方案。 请考虑我对PHP和JS的了解。 谢谢您能给我指出一个可能的解决方案。

Answer 1

您必须使用目标语言（JavaScript）的规则对do_shortcode()返回的值进行编码。

编码字符串以生成JavaScript代码的最佳PHP方法是json_encode() 。

您的代码应为：

var myvariable = <?php print json_encode(do_shortcode('[shortcode]')); ?>;

不再需要用引号引起来。 如果提供了字符串，则json_encode()会生成输入字符串的表示形式，该表示形式是有效的JavaScript字符串源代码。

例如，如果do_shortcode('[shortcode]')返回<div><a href="#"><span>Link text</span></a></div>则上面的代码行将产生：

var myvariable = "<div><a href=\"#\"><span>Link text<\/span><\/a><\/div>"

这是有效的JavaScript代码，会将上述字符串放入JavaScript变量myvariable 。

Answer 2

谢谢您的回答。 这是file-a.php（functions.php，WordPress）中的代码：

function shortcode_function() { 
    print '<p>Test</p>'; 
}
add_shortcode( 'shortcode', 'shortcode_function' );

这是file-b.php（footer.php，WordPress）中的代码：

<script>
    jQuery(document).ready(function($) {
    var myvariable = "<?php print do_shortcode('[shortcode]'); ?>";
    $( '.footer' ).prepend( myvariable );
    });
</script>

如您所见，这将返回一个损坏的<p>标记。

<script>
        jQuery(document).ready(function($) {
        var myvariable = "<p>Test";
        $( '.footer' ).prepend( 'myvariable );
        });
    </script>
</body>
</html>

这是使用json_encode（）（带引号和不带引号）的结果，在公共页面上看不到任何内容：

var myvariable = "<?php print json_encode(do_shortcode('[shortcode]')); ?>";
var myvariable = "<p>Test""";

var myvariable = <?php print json_encode(do_shortcode('[shortcode]')); ?>;
var myvariable = <p>Test"";

在实践中，我试图在页脚区域之前打印一些动态数据，即通过PHP查询从数据库提取的数据。 动态数据已正确打印，但HTML标记不正确。

Answer 3

这是我的解决方案。 它以其基本形式工作，现在我正在扩展它。

我在functions.php中使用反斜线转义了斜线

print "<p class='red'>RED<\/p>";

这将在footer.php中返回以下代码：

var str = "<p class='red'>RED<\/p>";

我所做的就是清理字符串，如下所示：

var sanitized_str = str.replace(/\\/g, '');

Javascript变量...

sanitized_str

...被正确渲染，打印时可以在网上看到正确的HTML标记，如下所示：

$( '.footer' ).prepend( sanitized_str );

所有标记在页面标记中均未正确关闭（例如</ p>，但公共结果已被清理且清晰可见。