将HTML存入JS变量时保留原有变量与换行符的问题如何解决？

问题原因 #

• 你使用普通单引号包裹字符串，JS 不会自动解析{msg}占位符，只有反引号包裹的模板字符串才支持${变量名}格式的变量插值
• 编写的HTML标签存在语法错误，多余的<、\转义符和错误的引号位置，导致生成的HTML结构完全不符合预期
• 变量插值的格式错误，缺少$标识符，正确的模板插值写法是${变量名}而非{变量名}

修正后的代码 #

// 原始变量无需修改
var msg = "This is a test" + "\n" + "Test"
// 使用反引号包裹模板字符串，通过${msg}插入变量，保证HTML标签语法正确
var emsg = `<p style="white-space: pre-wrap;">${msg}</p>`

补充说明 #

如果msg内容可能包含HTML特殊字符（比如<、>、&等），建议先对变量做转义处理再插入，避免渲染异常或安全问题：

function escapeHtml(str) {
  return str.replace(/[&<>"']/g, function(match) {
    const escapeChars = {
      '&': '&amp;',
      '<': '&lt;',
      '>': '&gt;',
      '"': '&quot;',
      "'": '&#39;'
    }
    return escapeChars[match]
  })
}

// 转义后插入变量
var emsg = `<p style="white-space: pre-wrap;">${escapeHtml(msg)}</p>`

内容的提问来源于stack exchange，提问作者Oliver Holmberg