将html转换为JS文件中的html字符串

Posted 2023-03-05

【中文标题】将html转换为JS文件中的html字符串

【英文标题】：convert html to html string in JS file

【发布时间】：2020-04-01 23:58:36

【问题描述】：

我想通过 JS 创建一些 html，因此我需要将 html 写入 JS 文件中，例如：

function createHtmlSection() 
    return "<li class=\"chapter up-wrapper-btn\">" +
        "<div>" +
        "<button><i class=\"fa fa-plus\" onclick=\"addSection('up',this)\"></i></button>" +
        "<label contenteditable=\"true\">section 1</label>" +
        "</div>" +
        "</li>";

是否有工具或快捷方式来创建这种类型的 html 字符串？

我的意思是，在这种情况下，我需要手动输入所有这些 html。与+ 并需要添加" 符号。

可以转换的东西：

<li class="chapter up-wrapper-btn">
    <div>
       <button><i class="fa fa-plus" onclick="addSection('up',this)"></i></button>
        <label contenteditable="true">section 1</label>
     </div>
</li>

到我需要手动输入的第一个字符串

【问题讨论】：

你的脚本从哪里得到你想要转换成字符串的HTML？

这篇文章应该能解答你的问题：***.com/questions/220603/…

你有什么问题？

【参考方案1】：

将您的 JS 文件更新为：

function createHtmlSection() 
    return `
             <li class="chapter up-wrapper-btn">
                <div>
                  <button>
                     <i class="fa fa-plus" onclick="addSection('up',this)"></i> 
                  </button>
                  <label contenteditable="true">section 1</label>
               </div>
             </li>
          `

阅读此链接了解更多信息： template literals

【参考方案2】：

您可以使用template literal（注意反引号）。文字支持多行，您不需要转义引号（您需要转义反引号）。

`<li class="chapter up-wrapper-btn">
    <div>
       <button><i class="fa fa-plus" onclick="addSection('up',this)"></i></button>
        <label contenteditable="true">section 1</label>
     </div>
</li>`

例子：

function createHtmlSection() 
  return `
    <li class="chapter up-wrapper-btn">
        <div>
           <button><i class="fa fa-plus" onclick="addSection('up',this)"></i></button>
            <label contenteditable="true">section 1</label>
         </div>
    </li>
  `;



document.querySelector('#root')
  .innerHTML = createHtmlSection();

<ul id="root"></ul>

您也可以将参数传递给函数，并使用expression interpolation将它们插入到字符串中：

function createHtmlSection(label) 
  return `
    <li class="chapter up-wrapper-btn">
        <div>
           <button><i class="fa fa-plus" onclick="addSection('up',this)"></i></button>
            <label contenteditable="true">$label</label>
         </div>
    </li>
  `;



document.querySelector('#root')
  .innerHTML = createHtmlSection('!!! section !!!');

<ul id="root"></ul>

【讨论】：

好答案，但重要的是要说这是 ES6 语法，并非所有浏览器都支持。所以你需要像 Babel 这样的东西来将你的代码编译成浏览器兼容的 javascript (ES5)。

这就是我添加 MDN 链接的原因。他们在底部有一个兼容性表。目前唯一不支持模板文字的浏览器是 IE。

【参考方案3】：

另一种方法是使用单引号并转义换行符。

类似这样的：

function createHtmlSection() 
    return '<li class="chapter up-wrapper-btn">\
        <div>\
            <button><i class="fa fa-plus" onclick="addSection(\'up\',this)"></i></button>\
            <label contenteditable="true">section 1</label>\
        </div>\
    </li>';


console.log(createHtmlSection());

换成单引号可以避免您在 HTML 中转义双引号，但您仍然需要引用单引号。

---

另一种选择是使用数组和.join('')它：

function createHtmlSection() 
    return [
	'<li class="chapter up-wrapper-btn">',
            '<div>',
                '<button><i class="fa fa-plus" onclick="addSection(\'up\',this)"></i></button>',
                '<label contenteditable="true">section 1</label>',
            '</div>',
        '</li>'
    ].join('');


console.log(createHtmlSection());

这使您可以在以后轻松添加/编辑/删除部分代码。

---

这两个选项都适用于 ES5 或更早版本。

对于现代浏览器，请使用Ori Drori提供的the ES6 version。

【参考方案4】：

只需像这样使用template literals（不是单引号“'”而是反引号“`”）：

// JavaScript

document.getElementById("a").innerHTML = `<li class="chapter up-wrapper-btn">
    <div>
       <button><i class="fa fa-plus" onclick="addSection('up',this)"></i></button>
        <label contenteditable="true">section 1</label>
     </div>
</li>`

<!-- HTML -->

<div id="a"></div>

模板文字是允许嵌入表达式的字符串文字。 您可以使用多行字符串和字符串插值功能 他们。在之前的版本中，它们被称为“模板字符串” ES2015 规范。

通过 - MDN Web Docs

【参考方案5】：

您也可以使用 '（单引号），这样您就不必在每个 " 前面加上 / 了