使用 javascript 正则表达式缩小 html 模板字符串

Question

在我的项目中，我使用了很多JavaScript模板字符串。在 webpack 编译后，会产生换行符、制表符和空格。如何使用正则表达式或任何 DOM API 删除它，例如document.createTreeWalker？我希望有简单的正则表达式来替换这些。

这是我的来源

const employees = ['Rajkeshwar', 'Suresh', 'Manoj', 'Ramesh', 'Sudhir'];
const domStr = `
<h1>Employee List</h1>
<ul class="employee-list">
${employees.reduce((str, emp) => {
str += `<li>${emp}</li>`;
return str;
}, '')}
</ul>
`;

这是我在编译后得到的

var employees = ["Rajkeshwar", "Suresh", "Manoj", "Ramesh", "Sudhir"];
var domStr = 'n  <h1>Employee List</h1>n  <ul class="employee-list">n    '.concat(
employees.reduce(function(str, emp) {
str += "<li>".concat(emp, "</li>");
return str;
}, ""),
"n  </ul>n"
);

Answer 1

您可以使用以下方式连接字符串。

const employees = ['Rajkeshwar', 'Suresh', 'Manoj', 'Ramesh', 'Sudhir'];
var domStr = `
<h1>Employee List</h1>
<ul class="employee-list">`;
employees.forEach(function(employee){
domStr += `<li>`+employee+`</li>`; 
});
domStr = domStr + `</ul>`;

在domStr中，您将拥有 字符串 .