Closed3

Prettierで付与されたvoid要素のトレイリングスラッシュをnode.jsで消す

たたたたたた

■「 /」を検出する正規表現

(?<=<.*?) /(?=>)

(?<=<.*?) ← 肯定後読み
(?=>) ← 肯定先読み
.*? ← 全ての文字列(最短一致)

つまり、和訳すると「タグ(<>)に囲まれている" /"(半角スペース+スラッシュ)を抽出する」という意味


サンプルコード

replace.js
const glob = require('glob');
const fs = require('fs');
const pattern = './public/**/*.html'; // HTMLファイルがあるディレクトリのパス

// ビルド時にトレイリングスラッシュ(<img />)の削除
glob(pattern, function (err, files) {
  if (err) {
    console.log('Unable to scan directory: ' + err);
  } else {
    // ファイルを一つずつ処理
    files.forEach(function (file) {
      fs.readFile(file, 'utf-8', (err, data) => {
        if (err) throw err;

        // テキストを置換する
        const replaced = data.replace(/(?<=<.*?) \/(?=>)/g, '');

        // 置換後のテキストをファイルに書き込む
        fs.writeFile(file, replaced, 'utf8', (err) => {
          if (err) throw err;
          file;
        });
      });
    });
  }
});
たたたたたた

2023/8/22現在では、build時に下記のような処理を最後に走らせてdist内のトレイリングスラッシュを自動的に消している

js
const fs = require("fs");
const path = require("path");

function replaceContents(filePath) {
  const content = fs.readFileSync(filePath, "utf8");

  // replace
  const newContent = content.replace(/ \/>/g, ">"); // ここでトレイリグスラッシュを削除
  fs.writeFileSync(filePath, newContent);
}

function processDirectory(dir) {
  const files = fs.readdirSync(dir);

  for (const file of files) {
    const filePath = path.join(dir, file);
    const stat = fs.statSync(filePath);

    if (stat.isDirectory()) {
      processDirectory(filePath); // ディレクトリの場合、再帰的に処理
    } else {
      // ファイルの拡張子が .html の場合のみ replaceContents を実行
      if (path.extname(filePath) === ".html") {
        replaceContents(filePath); // ファイルの場合、内容を置き換え
      }
    }
  }
}

// `dist` ディレクトリ内のすべてのファイルを処理
processDirectory(path.resolve("./dist"));
たたたたたた

Astro(静的サイトジェネレーター)では、デフォルトで自動的にトレイリングスラッシュを消してくれる。
特に制作環境に制限がなければ自分で削除を頑張るよりも、そのような仕様になっている技術に頼る方が良いかもしれない。

このスクラップは2023/08/22にクローズされました