この記事は最終更新日から1年以上経過しています。
SVGからマルチバイトのidとdata-nameをとるツール
公開日：
更新日：
こんにちは。田村です。
SVGをちょっと整形するツールを作成しました。
- idとdata-nameがマルチバイトの場合削除します。
プレビュー:
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; }
スタッフブログ
HTMLテーブルから属性を削除するツール
こんにちは。田村です。 tableのclass, id, style属性を削除してシンプルなHTMLに整形するツールを作成しました。 変換 プレビュー: #preview { width: 100%; min-height: 400px; margin-top: 40px; background-color: var(--var-color-status-disabled); } function removeAttributes() { const htmlInput = document.getElementById('htmlInput').value; const parser = new DOMParser(); const doc = parser.parseFromString(htmlInput, 'text/html'); // すべての要素から class, id, style 属性を削除 const elements = doc.querySelectorAll('*'); elements.forEach(el => { el.removeAttribute('class'); el.removeAttribute('id'); el.removeAttribute('style'); }); // 不要なxmlns属性を含まないようにbodyのinnerHTMLを直接取得 const outputHTML = doc.body.innerHTML; const output = document.getElementById('output'); output.value = outputHTML; output.focus(); output.select(); // テキストを選択状態にする document.getElementById('preview').innerHTML = outputHTML; }
スタッフブログ