javascript - 如何以最简单的方式 trim `html` 文本并将其传递给变量？

Question

我正在使用 angularjs 开发一个应用程序。我正在从其他开发人员处获取 html 代码。我要求所有需要存储在一个对象中。

每次我重新工作以像这样存储在变量中时:

var update = function () {
 string1 +="<div>some infor1 </div>"
 string1 +="<div>some infor2 </div>"
 string1 +="<div>some infor3 </div>"
 string1 +="<div>some infor4 </div>"
 string1 +="<div>some infor5 </div>"
 string1 +="<div>some infor6 </div>"

return string1;
}

但我正在寻找一种方法来将 html 复制并粘贴到变量中。我知道空白和所有内容都存在任何问题..但是怎么想出来的呢？

这是我的示例 html:

<div class="projectInfo">
    <div class="column design">
        <span>Design Phase</span>
    </div>
    <div class="column projects">    
        <div class="flip-container">
            <div class="flipper">
                <div class="front">
                    <h3>
                        <span class="num">10</span>
                        <span class="numCount">Projects</span>
                    </h3>
                </div>
                <div class="back">
                    <h3>
                        <span class="num">10</span>
                        <span class="numCount">Projects</span>
                    </h3>
                </div>
            </div>
       </div>                   
   </div>
   <div class="column percent">
       <span>45%</span>
   </div>
</div>

Here you can update

Answer 1

我强烈建议您将 HTML 保存在 HTML 文件中，而不是 JavaScript 文件中。但是，如果您坚持在 JavaScript 中使用它们:

在 ES6 中，您将能够使用模板字符串。

同时，您可以这样做:

1. 从var str = '

   开始

2. 将文本粘贴到 '

之后

3. 使用任何合适的文本编辑器，选择粘贴的文本并执行一系列搜索和替换操作:

   • 将所有的\替换为\\，然后

   • 将所有的'替换为\'，然后

   • 将 \ 添加到 HTML 中每一行的末尾(一个好的文本编辑器可以让您通过搜索和替换而不是手动执行此操作)

4. 在最后添加';

例如:

var str = '<div class="projectInfo">\
                    <div class="column design">\
                        <span>Design Phase</span>\
                    </div>\
                    <div class="column projects">\
    \
                    <div class="flip-container">\
                        <div class="flipper">\
                            <div class="front">\
                                <h3>\
                                    <span class="num">10</span>\
                                    <span class="numCount">Projects</span>\
                                </h3>\
                            </div>\
                            <div class="back">\
                                <h3>\
                                    <span class="num">10</span>\
                                    <span class="numCount">Projects</span>\
                                </h3>\
                            </div>\
                        </div>\
                    </div>\
    \
                    </div>\
                    <div class="column percent">\
                        <span>45%</span>\
                    </div>\
                </div>';
document.body.insertAdjacentHTML("beforeend", str);