Question

我不知道是否已经找到解决方案，因为我不知道引号/单引号的通用术语是什么，但是是否存在可以使用的第三个符号？

这是我的意思的示例：

我有一个“通常将文本复制到剪贴板”的javascript，通常在html中使用，如下所示：

<a href="javascript:;" onclick="clipboardCopy('TextToCopy')">LinkName</a>

剪贴板复制脚本如下：

function clipboardCopy(text) {

    var textArea = document.createElement("textarea");
    textArea.value = text;
    document.body.appendChild(textArea);
    textArea.select();

    document.execCommand('copy');

    document.body.removeChild(textArea);

}

但是，如果我希望另一个脚本在按下按钮时将这些链接打印到div中：

function CopyHtml() {
    document.getElementById('divname').innerHTML = "Links to print in div.";
}

由于已经使用了引号和单引号，因此将不允许使用（如果我将双引号更改为单引号，那么将单引号更改为什么？）。在这些问题中是否可以使用第三个字符？

Answer 1

您始终可以使用\"或\'逃脱。

然后，如果需要，您还将拥有新的ES6`

console.log("he\"llo \"world");
console.log('he\'llo \'world');
console.log(`I'm a hello "world"`);

例如，您可以简单地执行以下操作：

document.getElementById('divname').innerHTML = `<a href="javascript:;" onclick="clipboardCopy('TextToCopy')">LinkName</a>`;

Answer 2

对于更干净，更可维护的代码，我强烈建议使用addEventListener而不是使用像eval一样糟糕的内联处理程序来正确附加侦听器。例如，您可能有一个辅助功能，例如

function copyOnClick(elm, text) {
  elm.addEventListener('click', () => {
    clipboardCopy(text);
  });
}

然后代替

<a href="javascript:;" onclick="clipboardCopy('TextToCopy')">LinkName</a>

您可以选择a，然后致电

copyOnClick(a, 'TextToCopy');

将元素添加到divName中的CopyHtml时，您可以执行相同的操作。用createElement显式创建元素，然后调用copyOnClick：

function clipboardCopy(text) {
    var textArea = document.createElement("textarea");
    textArea.value = text;
    document.body.appendChild(textArea);
    textArea.select();
    document.execCommand('copy');
    document.body.removeChild(textArea);
    console.log('copied, check clipboard');
}

function copyOnClick(elm, text) {
  elm.addEventListener('click', () => {
    clipboardCopy(text);
  });
}

function CopyHtml() {
  const parent = document.getElementById('divname');
  [['text1', 'copy1'], ['text2', 'copy2']].forEach(([aText, aCopyText]) => {
    const a = parent.appendChild(document.createElement('a'));
    a.textContent = aText;
    copyOnClick(a, aCopyText);
  });
}

CopyHtml();

<div id="divname"></div>

这样，您不必担心属性值内的任何嵌套引号-您只需要选择元素并添加所需的侦听器即可。

使用引号和单引号时要使用的第三个字符

2 个答案: