如何将html属性代码转换为字符串

Posted 2023-05-07

【中文标题】如何将html属性代码转换为字符串

【英文标题】：How to convert html attribute code to string

【发布时间】：2021-04-03 23:17:24

【问题描述】：

我有这个js代码：

var my_elem = document.querySelector("[action='/cart/add']");

但是我需要把它变成一个字符串，所以我可以把它当作一个字符串变量。

我该怎么做？

我已经试过了：

'var my_elem = document.querySelector("[action=\'/cart/add\']");'

但我得到了一个错误：

syntax error, unexpected '"') === true) '
(T_CONSTANT_ENCAPSED_STRING)

更新

 public function start() 


      $my_var = '
    
    var my_elem = document.querySelector("\[action=\'\/cart\/add\']");
    
    
    var a = document.createElement("div");
        a.innerhtml = "<a href="#" style="display:none;" id="link-sz"><small><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512.002 512.002" style="width: 20px;"><path d="M509.502 104.908L407.097 2.502c-3.337-3.337-8.73-3.337-12.067 0L2.502 395.03c-3.337 3.337-3.337 8.73 0 12.067l102.405 102.405c1.596 1.604 3.772 2.5 6.033 2.5s4.43-.896 6.033-2.5L509.5 116.975c1.604-1.596 2.5-3.772 2.5-6.033s-.894-4.43-2.498-6.034zM110.94 491.402l-90.338-90.338 380.46-380.46L491.4 110.94 110.94 491.4zm298.7-414.605c-14.115 0-25.6 11.486-25.6 25.6s11.486 25.6 25.6 25.6 25.6-11.486 25.6-25.6-11.486-25.6-25.6-25.6zm0 34.135c-4.7 0-8.534-3.832-8.534-8.534s3.823-8.534 8.534-8.534 8.534 3.832 8.534 8.534-3.823 8.534-8.534 8.534z"></path><use xlink:href="#B--inject-1"></use><use xlink:href="#C--inject-1"></use><use xlink:href="#B--inject-1" x="-51.203" y="51.195"></use><use xlink:href="#C--inject-1" x="-51.203" y="51.187"></use><use xlink:href="#B--inject-1" x="-102.405" y="102.39"></use><use xlink:href="#C--inject-1" x="-102.405" y="102.383"></use><path d="M164.643 244.95l12.066-12.07 25.6 25.593-12.066 12.07z"></path><use xlink:href="#C--inject-1" x="-153.608" y="153.595"></use><use xlink:href="#B--inject-1" x="-204.81" y="204.796"></use><use xlink:href="#C--inject-1" x="-204.81" y="204.797"></use><use xlink:href="#B--inject-1" x="-255.993" y="256.01"></use><path d="M36.634 372.976l12.068-12.068 34.135 34.135L70.77 407.11z"></path><defs><path id="B--inject-1" d="M318.253 91.37l12.068-12.068 25.603 25.603-12.068 12.068z"></path><path id="C--inject-1" d="M292.648 116.973l12.068-12.068 34.135 34.135-12.068 12.068z"></path></defs></svg><span id="link_text">MY SIZE</span></small></a>";
        a.id = \'myBtn-sz\'; ';
    
    

【问题讨论】：

请在您要比较此字符串的位置添加代码。

语法错误提到的代码不在您的问题中。如果您不提供重现此错误的代码，我们将无法帮助您。

好的，我会在一分钟内

我更新了我的问题@RianZaman

【参考方案1】：

问题在于传统的字符串文字不能跨越多行，除非您在每行的末尾放置一个反斜杠（这看起来很糟糕）。一个简单的解决方案是使用 back tic 而不是单引号，所以它是一个模板文字：

$my_var = ` 
    
    var my_elem = document.querySelector("[action='/cart/add']");
    
    
    var a = document.createElement("div");
        a.innerHTML = "<a href="#" style="display:none;" id="link-sz"><small><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512.002 512.002" style="width: 20px;"><path d="M509.502 104.908L407.097 2.502c-3.337-3.337-8.73-3.337-12.067 0L2.502 395.03c-3.337 3.337-3.337 8.73 0 12.067l102.405 102.405c1.596 1.604 3.772 2.5 6.033 2.5s4.43-.896 6.033-2.5L509.5 116.975c1.604-1.596 2.5-3.772 2.5-6.033s-.894-4.43-2.498-6.034zM110.94 491.402l-90.338-90.338 380.46-380.46L491.4 110.94 110.94 491.4zm298.7-414.605c-14.115 0-25.6 11.486-25.6 25.6s11.486 25.6 25.6 25.6 25.6-11.486 25.6-25.6-11.486-25.6-25.6-25.6zm0 34.135c-4.7 0-8.534-3.832-8.534-8.534s3.823-8.534 8.534-8.534 8.534 3.832 8.534 8.534-3.823 8.534-8.534 8.534z"></path><use xlink:href="#B--inject-1"></use><use xlink:href="#C--inject-1"></use><use xlink:href="#B--inject-1" x="-51.203" y="51.195"></use><use xlink:href="#C--inject-1" x="-51.203" y="51.187"></use><use xlink:href="#B--inject-1" x="-102.405" y="102.39"></use><use xlink:href="#C--inject-1" x="-102.405" y="102.383"></use><path d="M164.643 244.95l12.066-12.07 25.6 25.593-12.066 12.07z"></path><use xlink:href="#C--inject-1" x="-153.608" y="153.595"></use><use xlink:href="#B--inject-1" x="-204.81" y="204.796"></use><use xlink:href="#C--inject-1" x="-204.81" y="204.797"></use><use xlink:href="#B--inject-1" x="-255.993" y="256.01"></use><path d="M36.634 372.976l12.068-12.068 34.135 34.135L70.77 407.11z"></path><defs><path id="B--inject-1" d="M318.253 91.37l12.068-12.068 25.603 25.603-12.068 12.068z"></path><path id="C--inject-1" d="M292.648 116.973l12.068-12.068 34.135 34.135-12.068 12.068z"></path></defs></svg><span id="link_text">MY SIZE</span></small></a>";
        a.id = 'myBtn-sz'; `;

请注意模板文字开头和结尾处的反勾号。您现在也不再需要转义单引号（尽管保留它们也可以使用）。