如何对字符串字面量中的HTML代码进行高亮与格式化？

嘿，我太懂你这种用字符串拼HTML做原型的场景了——快速迭代、不用搞复杂构建，就是写出来的代码一堆拼接符号，看着眼晕还没法正常高亮！针对你非生产环境的需求，这几个简单方案绝对够用：

1. 先格式化HTML，再转成字符串字面量 #

你可以先把未转义的HTML代码（把<换回<、>换回>）放到编辑器的HTML格式化工具里，或者直接贴到浏览器开发者工具的Elements面板里，先把HTML整理成工整的层级结构，然后再转成带转义的字符串：

• 把<替换成<，>替换成>
• 双引号用\"转义
• 每一行末尾加"+换行拆分

比如格式化后的HTML：

<div id="first_observation">
  <div class="row">
    <div class="col-6">
      <fieldset class="form-group row">
        <div class="col-sm-10 offset-2">
          <div class="row">
            <div class="col-2"> <h3>Type</h3> </div>
          </div>
        </div>
      </fieldset>
    </div>
  </div>
</div>

转成字符串字面量就是：

var observation = "<div id=\"first_observation\">" +
                  "<div class=\"row\">" +
                  "<div class=\"col-6\">" +
                  "<fieldset class=\"form-group row\">" +
                  "<div class=\"col-sm-10 offset-2\">" +
                  "<div class=\"row\">" +
                  "<div class=\"col-2\"> <h3>Type</h3> </div>" +
                  "</div>" +
                  "</div>" +
                  "</fieldset>" +
                  "</div>" +
                  "</div>" +
                  "</div>";

这样编辑器就能识别出转义后的HTML标签，大概率会自动高亮显示。

2. 改用ES6模板字符串（最推荐！） #

既然是非生产环境，直接用ES6的模板字符串（反引号`）代替普通字符串拼接就完事儿了！不用转义双引号，还能直接写格式化好的HTML，编辑器会直接高亮HTML部分，代码可读性拉满：

var observation = `
<div id="first_observation">
  <div class="row">
    <div class="col-6">
      <fieldset class="form-group row">
        <div class="col-sm-10 offset-2">
          <div class="row">
            <div class="col-2"> <h3>Type</h3> </div>
          </div>
        </div>
      </fieldset>
    </div>
  </div>
</div>
`;

完全不用拼接，直接写工整的HTML就行，jQuery照样能正常用这个字符串创建元素，比如$(observation).appendTo('body')，完美适配你的原型场景。

3. 写个小工具函数实时格式化 #

如果已经有一堆旧的字符串拼接代码，不想手动改，可以写个简单的工具函数，把混乱的HTML字符串转成格式化后的版本，还能顺便在控制台输出高亮的结果：

function formatHtmlString(htmlStr) {
  // 先把转义的标签转回来
  const unescaped = htmlStr.replace(/&lt;/g, '<').replace(/&gt;/g, '>');
  // 用DOMParser解析成DOM结构
  const parser = new DOMParser();
  const doc = parser.parseFromString(unescaped, 'text/html');
  // 序列化回格式化后的字符串
  const formatted = new XMLSerializer().serializeToString(doc.body.firstChild);
  // 转义回字符串字面量需要的格式
  return formatted.replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '\\"');
}

// 用法示例
var messyObservation = "&lt;div id=\"first_observation\"&gt;" + "&lt;div class=\"row\"&gt;" + "&lt;div class=\"col-6\"&gt;" + "&lt;fieldset class=\"form-group row\"&gt;" + "&lt;div class=\"col-sm-10 offset-2\"&gt;" + "&lt;div class=\"row\"&gt;" + "&lt;div class=\"col-2\"&gt; &lt;h3&gt;Type&lt;/h3&gt; &lt;/div&gt;";
var formattedObservation = formatHtmlString(messyObservation);
console.log(formattedObservation);

这个函数会自动帮你把混乱的拼接字符串转成工整的、带高亮的格式，适合批量处理旧代码。

因为你是做非生产环境原型，这些方法都不用考虑性能或者安全性问题，怎么方便怎么来就好！

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