この記事は最終更新日から1年以上経過しています。
HTMLテーブルから属性を削除するツール
公開日：
更新日：
こんにちは。田村です。
tableのclass, id, style属性を削除してシンプルなHTMLに整形するツールを作成しました。
プレビュー:
faviconにsvgを埋め込むジェネレーター
こんにちは。田村です。 faviconにsvgを表示したい場合に使えるジェネレーターを作成しました。 改行・余白の削除: .replace(/\s*\n\s*/g, '')でSVG全体を一行に整形。 エンコード: "を%22に、をそれぞれ%3Cと%3Eに変換。 変換 プレビュー: #preview { width: 100%; height: 400px; margin-top: 40px; background-color: var(--var-color-status-disabled); } function convertToFavicon() { const svgInput = document.getElementById('svgInput').value; if (!svgInput.trim()) { alert("SVGコードを入力してください。"); return; } // SVGを一行に変換 let compressedSVG = svgInput .replace(/\s*\n\s*/g, '') // 改行と余白を削除 .replace(/"/g, '%22') // "を%22に変換 .replace(/をエンコード const faviconLink = ``; // 出力に表示 const output = document.getElementById('output'); output.value = faviconLink; output.focus(); output.select(); // プレビュー用にデコードして表示 const preview = document.getElementById('preview'); const decodedSVG = compressedSVG.replace(/%22/g, '"').replace(/%3C/g, ''); preview.innerHTML = decodedSVG; }
スタッフブログ
SVGからマルチバイトのidとdata-nameをとるツール
こんにちは。田村です。 SVGをちょっと整形するツールを作成しました。 idとdata-nameがマルチバイトの場合削除します。 変換 プレビュー: #preview { width: 100%; height: 400px; margin-top: 40px; background-color: var(--var-color-status-disabled); } function removeAttributes() { const svgInput = document.getElementById('svgInput').value; const parser = new DOMParser(); const doc = parser.parseFromString(svgInput, 'image/svg+xml'); const elements = doc.querySelectorAll('[id], [data-name]'); elements.forEach(el => { const idValue = el.getAttribute('id'); const dataNameValue = el.getAttribute('data-name'); // マルチバイト文字を含むかどうかをチェックする関数 const containsMultibyte = (str) => { for (let char of str) { if (char.charCodeAt(0) > 255) { return true; } } return false; }; // 'id'属性がマルチバイト文字を含む場合は削除 if (idValue && containsMultibyte(idValue)) { el.removeAttribute('id'); } // 'data-name'属性がマルチバイト文字を含む場合は削除 if (dataNameValue && containsMultibyte(dataNameValue)) { el.removeAttribute('data-name'); } }); const serializer = new XMLSerializer(); const outputSVG = serializer.serializeToString(doc.documentElement); const output = document.getElementById('output'); output.value = outputSVG; output.focus(); output.select(); // テキストを選択状態にする document.getElementById('preview').innerHTML = outputSVG; }
スタッフブログ