Nodejs中有没有将html转化成jade的工具？

Nodejs中有没有将html转化成jade的工具？

RT

13 回复 
html2jade http://cnodejs.org > cnode.jade

当然可以。在Node.js环境中，虽然Jade（现在称为Pug）是一种流行的模板引擎，但直接将HTML转换为Jade/Pug并不是一个常见的需求。不过，你可以通过一些间接的方法来实现这一目标。

方法一：使用在线转换工具

最简单的方法是使用在线工具，如HTML to Jade。这些工具允许你粘贴HTML代码并生成相应的Jade/Pug代码。这种方法不需要编写任何代码，但可能不适用于大规模转换。

方法二：使用Node.js库

如果你需要在Node.js环境中自动化这个过程，可以使用一些库。一个比较流行的选择是html-to-jade。但是需要注意的是，该库可能已经不再维护，因此建议寻找替代方案或自行编写转换逻辑。

示例代码

这里提供一个简单的示例，使用cheerio库解析HTML，并手动构建Jade/Pug语法。这只是一个基本示例，实际应用中可能需要更复杂的处理。

首先，安装所需的库：

npm install cheerio

然后，创建一个转换脚本：

const cheerio = require('cheerio');

function htmlToJade(html) {
    const $ = cheerio.load(html);
    let jadeOutput = '';

    $('*').each((index, element) => {
        const tag = $(element).prop('tagName').toLowerCase();
        const attrs = $(element).attr();
        const content = $(element).html();

        // 构建Jade/Pug语法
        jadeOutput += `${tag} ${attrs ? `(${Object.keys(attrs).map(attr => `${attr}="${attrs[attr]}"`).join(' ')})` : ''}\n`;

        if (content) {
            jadeOutput += `  ${content.trim().replace(/\n/g, '\n  ')}\n`;
        } else {
            jadeOutput += '\n';
        }
    });

    return jadeOutput;
}

// 示例HTML
const html = `
<div id="container" class="main">
  <h1>Hello World</h1>
  <p>This is a test paragraph.</p>
</div>
`;

// 转换为Jade/Pug
console.log(htmlToJade(html));

这段代码使用cheerio解析HTML，并尝试将其转换为Jade/Pug格式。请注意，这种自动转换可能不会完美地匹配所有情况，特别是对于复杂的HTML结构。

希望这些信息对你有所帮助！

什么意思？

[@ggaaooppeenngg](/user/ggaaooppeenngg) html2jade 工具 npm install -g html2jade

[@javanode](/user/javanode) 嗯，我想把一个html文件转化成jade的形式，好放在view目录下，不想每次自己照着写。

解决没有？？？

既然都有html了，为什么不直接ejs？

http://html2jade.org/

[@captainblue2013](/user/captainblue2013) 我也赞成使用ejs。 估计楼主所在的开发团队已经认可并习惯使用jade了。

[@huazhenhz](/user/huazhenhz) html2jade早有耳闻，但之前有听说，这个工具在转换含有东方文字(简繁中文、日文、韩文等)的网页时，会有乱码生成。不知目前可有办法解决？？

[@huazhenhz](/user/huazhenhz) 试试这个：http://ejs2pug.jijiyy.me/ 不会有中文乱码。

https://github.com/i5ting/hade

在Node.js中，并没有直接将HTML转换为Jade（现在称为Pug）的工具。Jade/Pug是一种不同的模板引擎，其语法与HTML不完全相同，因此直接转换并不总是可行。不过，你可以使用一些工具或库来帮助你手动完成这个过程。

一个可能的方法是使用cheerio库解析HTML并生成Jade代码。但是这需要人工干预来编写适当的转换逻辑。以下是一个简单的示例，说明如何使用cheerio解析HTML：

const cheerio = require('cheerio');

// 示例HTML字符串
const html = `
<html>
  <head>
    <title>Example</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <p>This is a paragraph.</p>
  </body>
</html>
`;

// 使用cheerio加载HTML
const $ = cheerio.load(html);

// 构建Jade代码
let jadeCode = '';

$('*').each((index, element) => {
  const tag = $(element).prop('tagName').toLowerCase();
  const attributes = $(element).prop('attribs');
  const content = $(element).html();

  let attributeString = '';
  if (attributes) {
    attributeString = Object.keys(attributes)
      .map(attr => `${attr}="${attributes[attr]}"`)
      .join(' ');
  }

  if (tag === 'html') {
    jadeCode += `doctype\n`;
    jadeCode += `html\n`;
  } else if (tag === 'head') {
    jadeCode += `  head\n`;
    jadeCode += `    title ${content}\n`;
  } else if (tag === 'body') {
    jadeCode += `  body\n`;
  } else {
    jadeCode += `  ${tag}(${attributeString})\n`;
    if (content) {
      jadeCode += `    ${content.trim()}\n`;
    }
  }
});

console.log(jadeCode);

上述代码会输出类似于以下的Jade代码：

doctype
html
  head
    title Example
  body
    h1 Hello, world!
    p This is a paragraph.

请注意，这只是一个非常基础的示例，实际应用中可能需要处理更多复杂的HTML结构和属性。如果你有大量的HTML文件需要转换，建议手动重新编写Jade模板，或者使用更专业的转换工具。

回到顶部