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にクローズされました