javascript - 如何将html属性代码转换为字符串
问题描述
我有这个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\'; ';
}
解决方案
问题是传统的字符串文字不能跨越多行,除非您在每行的末尾放置一个反斜杠(这看起来很糟糕)。一个简单的解决方案是使用 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'; `;
请注意模板文字开头和结尾处的反勾号。您现在也不再需要转义单引号(尽管如果您保留它们也可以使用)。
推荐阅读
- javascript - 通过php调用javascript函数的问题
- jsf - 从另一个 p:dialog 调用 p:dialog :数据为空
- javascript - 无法使用 x5c (x509) 公共证书验证 JWT
- html - 在输入类型范围的步骤和拇指上放置图标
- python - Python 性能:平方根和热循环操作策略
- excel - 根据标题复制Excel中的列
- java - IntelliJ Maven JAR“没有主要清单属性错误”
- azure - 将多个 .NET Core 项目的测试覆盖率从 Azure DevOps 发布到 SonarQube 服务器
- flask - flask-sqlalchemy:数据库断开问题
- android - 服务将在哪个线程中运行?