是否有在js中使用引号的替代方法?

时间:2017-09-19 05:15:56

标签: javascript html

例如,在以下javascript代码中,如果您使用单引号打开document.getElementById('code').value =您将在window.open遇到无法使用单引号的问题,以打开它。这将关闭getElementById并破坏代码。您也不能使用双引号,因为如果使用双引号,则在newwindow周围加上引号时会遇到同样的问题。有办法解决这个问题吗?

   function genorateCode() {
  var account = document.getElementById("account").value;
  var url = document.getElementById("url").value;
  document.getElementById('code').value = '<link href="https://fonts.googleapis.com/css?family=Lato:300" rel="stylesheet" type="text/css"><a href="' + url + '" ' + ' onclick="window.open("' + url + '", "newwindow", "width=400,height=500"); return false;">' + '<div class="button"><img src="https://s15.postimg.org/mfpd2ki8r/icon.png" width="16">@' + account + '</div></a>';
}

(这些都放在文本区域,因此用户可以使用“生成的代码”

<textarea readonly id="code"></textarea>

2 个答案:

答案 0 :(得分:0)

您可以尝试使用`with variable interpolation $ {},如下面的小提琴:

function generateCode() {
  var account = document.getElementById("account").value;
  var url = document.getElementById("url").value;
  document.getElementById('code').value = `<link href="https://fonts.googleapis.com/css?family=Lato:300" rel="stylesheet" type="text/css"><a href="${url}" onclick="window.open('${url}', 'newwindow', 'width=400,height=500'); return false;"><div class="button"><img src="https://s15.postimg.org/mfpd2ki8r/icon.png" width="16">${account}</div></a>`;
}

window.generateCode = generateCode;
<p>
Account: <input id="account" />
</p>
<p>
URL: <input id="url" /> 
</p>
<p>
Code: <textarea readonly id="code"></textarea>
</p>
<p>
<button onclick="javascript:generateCode()">
Get the code!
</button>
</p>

答案 1 :(得分:0)

你可以用`来包围你的字符串,这是键盘上1旁边的按钮,通常称为反引号。

这使您可以访问其他一些语法,因此您可以执行类似这样的操作

function genorateCode() {
  var account = document.getElementById("account").value;
  var url = document.getElementById("url").value;
  document.getElementById('code').value = `<link href="https://fonts.googleapis.com/css?family=Lato:300" rel="stylesheet" type="text/css"><a href="${url}" onclick="window.open("${url}", "newwindow", "width=400,height=500"); return false;"> <div class="button"><img src="https://s15.postimg.org/mfpd2ki8r/icon.png" width="16">@${account}</div></a>`;
}
相关问题