在 Innerhtml 中传递字符串值时保留撇号

Question

文本值包含带有双引号和撇号的字符串文本，如您在示例中所见。当我打印结果时，它会更改为不同的字符。

来自 API 的文本是：

“输入不匹配 'STARTt' 预期 'START'”；

但是当我打印它时，它变成了：

“不匹配”输入="" 'startt'=""期待="" 'start'=""

我想准确地打印字符串的存储方式

  
  var marker = document.createElement("div");
  
  var text = "mismatched input 'STARTt' expecting 'START' ";
  
  marker.innerHTML = "<div data-tooltip=" + text+ ">⚠️</div>";



console.log(marker.innerHTML);

Answer 1

包含空格的属性值必须用 " 或 ' 分隔。

包含 ' 的属性值必须用 "

分隔

包含 " 的属性值必须用 ' 分隔。

包含 " 和 ' 的属性值必须用其中之一分隔，而另一个必须替换为适当的实体（" 或 ' ).

当您遇到任何类型的转义要求时，尝试通过将字符串混合在一起来生成 HTML 是自找麻烦。

不要这样做。请改用 DOM 方法。

const marker = document.createElement("div");
const text = "mismatched input 'STARTt' expecting 'START' ";
const child = document.createElement('div');
child.setAttribute('data-tooltip', text);
child.innerText = "⚠️";
marker.appendChild(child);
console.log(marker.innerHTML);

Answer 2

您需要用引号将 text 括起来。

这对我有用：

marker.innerHTML = "<div data-tooltip=\"" + text+ "\">⚠️</div>";

Answer 3

使用模板字符串。应该可以解决问题

  var marker = document.createElement("div");
  
  var text = `mismatched input 'STARTt' expecting 'START' `;
  
  marker.innerHTML = `<div data-tooltip=" + text+ ">⚠️</div>`;



console.log(marker.innerHTML);

在 Innerhtml 中传递字符串值时保留撇号

keep apostrophes when passing string value in Innerhtml

javascript

innerhtml