Hugging Face's logo

Spaces:
SenY
/
dummyTextUtil
Running

App Files Community
dummyTextUtil / index.html
SenY's picture
SenY
字下げボタン追加
19c5063
raw
history blame contribute delete
27.5 kB
 <!DOCTYPE html>
<html lang="ja" data-bs-theme="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>テキスト編集ユーティリティ</title>
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Font Awesome -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
<style>
.text-area-container {
margin: 20px 0;
position: relative;
}
.text-area-controls {
position: absolute;
top: 10px;
right: 10px;
z-index: 10;
display: flex;
gap: 8px;
}
.text-area-controls .btn {
padding: 6px 12px;
font-size: 14px;
border-radius: 6px;
}
.text-area-container textarea {
padding-right: 80px;
}
.accordion-button:not(.collapsed) {
background-color: var(--bs-primary-bg-subtle);
}
.layout-wrapper {
display: flex;
flex-direction: row;
height: 100vh;
}
.sidebar {
width: 250px;
min-width: 250px;
transition: all 0.3s;
z-index: 1000;
background-color: var(--bs-body-bg);
border-right: 1px solid var(--bs-border-color, #444);
margin-top: 32px;
}
.main-content {
flex: 1 1 0%;
transition: all 0.3s;
margin-top: 32px;
display: flex;
flex-direction: column;
align-items: stretch;
}
.main-inner {
width: 100%;
max-width: 100%;
padding: 0 8px;
margin: 0;
}
@media (min-width: 768px) {
.layout-wrapper {
padding: 0 25vh;
}
}
</style>
</head>
<body>
<div class="layout-wrapper">
<!-- メインコンテンツ -->
<div class="main-content" id="mainContent">
<div class="main-inner">
<h2 class="mb-3">テキスト編集ユーティリティ</h2>
<div class="d-grid gap-2">
<button class="btn btn-primary" id="processBtn">
<i class="fas fa-cog me-2"></i>Process
</button>
<button class="btn btn-secondary" id="deprocessBtn">
<i class="fas fa-undo me-2"></i>Deprocess
</button>
<div class="form-group">
<label for="numberFormatSelect" class="form-label">数字表記:</label>
<select class="form-select" id="numberFormatSelect">
<option value="none">None（変更なし）</option>
<option value="kanji">漢数字に統一</option>
<option value="arabic">算用数字に統一</option>
</select>
</div>
</div>
<div class="accordion" id="textEditorAccordion">
<!-- 上部テキストエリア -->
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseOne">
<i class="fas fa-chevron-down me-2"></i>上部テキストエリア
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show"
data-bs-parent="#textEditorAccordion">
<div class="accordion-body">
<div class="text-area-container">
<div class="text-area-controls">
<button class="btn btn-outline-success btn-sm" onclick="copyToClipboard('topText', event)" title="コピー">
<i class="fas fa-copy"></i>
</button>
<button class="btn btn-outline-primary btn-sm" onclick="pasteFromClipboard('topText')" title="ペースト">
<i class="fas fa-paste"></i>
</button>
<button class="btn btn-outline-danger btn-sm" onclick="clearTextarea('topText')" title="クリア">
<i class="fas fa-trash"></i>
</button>
<button class="btn btn-outline-secondary btn-sm" onclick="applyNovelFormat('topText')" title="小説フォーマット統一（字下げ・スペース・三点リーダー・句点削除）">
<i class="fas fa-book"></i>
</button>
</div>
<textarea id="topText" class="form-control" style="width:100%; min-height:50vh;"
rows="10" placeholder="ここにテキストを入力してください"></textarea>
</div>
</div>
</div>
</div>
<!-- 下部テキストエリア -->
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseTwo">
<i class="fas fa-chevron-down me-2"></i>下部テキストエリア
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#textEditorAccordion">
<div class="accordion-body">
<div class="text-area-container">
<div class="text-area-controls">
<button class="btn btn-outline-success btn-sm" onclick="copyToClipboard('bottomText', event)" title="コピー">
<i class="fas fa-copy"></i>
</button>
<button class="btn btn-outline-primary btn-sm" onclick="pasteFromClipboard('bottomText')" title="ペースト">
<i class="fas fa-paste"></i>
</button>
<button class="btn btn-outline-danger btn-sm" onclick="clearTextarea('bottomText')" title="クリア">
<i class="fas fa-trash"></i>
</button>
<button class="btn btn-outline-secondary btn-sm" onclick="applyNovelFormat('bottomText')" title="小説フォーマット統一（字下げ・スペース・三点リーダー・句点削除）">
<i class="fas fa-book"></i>
</button>
</div>
<textarea id="bottomText" class="form-control" style="width:100%; min-height:50vh;"
rows="10" placeholder="ここにテキストを入力してください"></textarea>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseThree">
<i class="fas fa-chevron-down me-2"></i>メモ
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse"
data-bs-parent="#textEditorAccordion">
<div class="accordion-body">
<div class="text-area-container">
<div class="text-area-controls">
<button class="btn btn-outline-success btn-sm" onclick="copyToClipboard('memoArea', event)" title="コピー">
<i class="fas fa-copy"></i>
</button>
<button class="btn btn-outline-primary btn-sm" onclick="pasteFromClipboard('memoArea')" title="ペースト">
<i class="fas fa-paste"></i>
</button>
<button class="btn btn-outline-danger btn-sm" onclick="clearTextarea('memoArea')" title="クリア">
<i class="fas fa-trash"></i>
</button>
<button class="btn btn-outline-secondary btn-sm" onclick="applyNovelFormat('memoArea')" title="小説フォーマット統一（字下げ・スペース・三点リーダー・句点削除）">
<i class="fas fa-book"></i>
</button>
</div>
<textarea id="memoArea" class="form-control" style="width:100%; min-height:50vh;"
rows="10" placeholder="ここにテキストを入力してください"></textarea>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap 5 JS Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
let lastSaveTimestamp = 0;
// 0pxスペース（ゼロ幅スペース）の定数
const ZERO_WIDTH_SPACE = '&#8204;';
// 既知のダミー文字の候補
const KNOWN_DUMMY_CHARS = [
'\u200c', '\u200b', '\u200d', // ゼロ幅文字
'&#8204;', '&#8203;', '&zwnj;', // HTMLエンティティ
'\u200e', '\u200f', // 方向制御文字
'\u2060', '\u2061', '\u2062', '\u2063', '\u2064' // その他の制御文字
];
// 文字の出現頻度を分析する関数
function analyzeCharFrequency(text) {
const frequency = new Map();
for (let i = 0; i < text.length; i++) {
const char = text[i];
frequency.set(char, (frequency.get(char) || 0) + 1);
}
return frequency;
}
// 文字列のパターンを分析してダミー文字の候補を探す関数
function findPatternCandidate(text) {
if (!text || text.length < 3) return null;
// 文字の出現頻度を分析
const frequency = analyzeCharFrequency(text);
// 文字列を2文字ずつに分割して、各文字の間の文字を確認
const patternMap = new Map();
for (let i = 1; i < text.length - 1; i += 2) {
const char = text[i];
const prevChar = text[i - 1];
const nextChar = text[i + 1];
// 前後の文字が同じで、かつ現在の文字が一定の頻度で出現している場合
if (prevChar === nextChar &&
frequency.get(char) > text.length * 0.3) { // 30%以上の出現率
patternMap.set(char, (patternMap.get(char) || 0) + 1);
}
}
// 最も頻出するパターンを返す
let maxCount = 0;
let candidate = null;
for (const [char, count] of patternMap) {
if (count > maxCount) {
maxCount = count;
candidate = char;
}
}
return candidate;
}
// 文字間のダミー文字を検出する関数
function detectDummyChar(text) {
if (!text || text.length < 3) return null;
// まず既知のダミー文字をチェック
for (let i = 1; i < text.length - 1; i += 2) {
const char = text[i];
if (KNOWN_DUMMY_CHARS.includes(char) &&
text[i - 1] !== char && text[i + 1] !== char) {
return char;
}
}
// 既知のダミー文字が見つからない場合はパターン分析を実行
return findPatternCandidate(text);
}
// 文字列の各文字の間に指定の文字列を挟む
function insertBetweenChars(text, insertStr) {
if (!text) return '';
return text.split('').join(insertStr);
}
// 文字列から指定の文字列を除去
function removeBetweenChars(text, removeStr) {
if (!text) return '';
return text.split(removeStr).join('');
}
// HTMLエンティティを実体参照に変換する関数
function decodeHtmlEntities(str) {
const textarea = document.createElement('textarea');
textarea.innerHTML = str;
return textarea.value;
}
// テキストエリアの値を取得・設定する関数
function getUpperText() {
return document.querySelectorAll('.text-area-container textarea')[0].value;
}
function setUpperText(val) {
document.querySelectorAll('.text-area-container textarea')[0].value = val;
}
function getLowerText() {
return document.querySelectorAll('.text-area-container textarea')[1].value;
}
function setLowerText(val) {
document.querySelectorAll('.text-area-container textarea')[1].value = val;
}
// processボタンの挙動
document.getElementById('processBtn').addEventListener('click', function () {
const upperText = getUpperText();
const processed = insertBetweenChars(upperText, ZERO_WIDTH_SPACE);
setLowerText(processed);
// 下部テキストエリアを表示
const lowerAccordion = new bootstrap.Collapse(document.getElementById('collapseTwo'), {
toggle: false
});
lowerAccordion.show();
});
// deprocessボタンの挙動
document.getElementById('deprocessBtn').addEventListener('click', function () {
let lowerText = getLowerText();
// まずHTMLエンティティを実体参照に変換
lowerText = decodeHtmlEntities(lowerText);
const dummyChar = detectDummyChar(lowerText);
if (!dummyChar) {
alert('文字間のダミー文字を検出できませんでした。');
return;
}
const deprocessed = removeBetweenChars(lowerText, dummyChar);
setUpperText(deprocessed);
// 上部テキストエリアを表示
const upperAccordion = new bootstrap.Collapse(document.getElementById('collapseOne'), {
toggle: false
});
upperAccordion.show();
});
function saveToUserStorage(force = false) {
const currentTime = Date.now();
if (currentTime - lastSaveTimestamp < 5000 && !force) {
console.debug('セーブをスキップします');
return;
}
console.debug('セーブを実行します');
// 既存のデータを取得
const textUtilData = JSON.parse(localStorage.getItem('textUtil') || '{}');
const newData = {};
Array.from(document.querySelectorAll("input[id], textarea[id], select[id]")).forEach(el => {
if (el.id) {
newData[el.id] = el.type === 'checkbox' ? el.checked : el.value;
}
});
Object.assign(textUtilData, newData);
console.log(textUtilData);
localStorage.setItem('textUtil', JSON.stringify(textUtilData));
lastSaveTimestamp = currentTime;
}
function loadFromUserStorage() {
const textUtilData = JSON.parse(localStorage.getItem('textUtil') || '{}');
document.getElementById('bottomText').value = textUtilData['bottomText'] || '';
document.getElementById('topText').value = textUtilData['topText'] || '';
document.getElementById('memoArea').value = textUtilData['memoArea'] || '';
document.getElementById('numberFormatSelect').value = textUtilData['numberFormatSelect'] || 'none';
}
document.querySelectorAll("#bottomText, #topText").forEach(el => {
el.addEventListener('input', () => {
saveToUserStorage(false);
});
});
document.querySelectorAll("#memoArea").forEach(el => {
el.addEventListener('input', () => {
saveToUserStorage(true);
});
});
document.querySelectorAll("#numberFormatSelect").forEach(el => {
el.addEventListener('change', () => {
saveToUserStorage(true);
});
});
document.addEventListener('DOMContentLoaded', function () {
// ページ読み込み時にデータを復元
loadFromUserStorage();
});
// クリップボードにコピーする関数
async function copyToClipboard(textareaId, event) {
const textarea = document.getElementById(textareaId);
const text = textarea.value;
try {
await navigator.clipboard.writeText(text);
// 成功時のフィードバック（オプション）
const button = event.target.closest('button');
const originalText = button.innerHTML;
button.innerHTML = '<i class="fas fa-check"></i>';
setTimeout(() => {
button.innerHTML = originalText;
}, 1000);
} catch (err) {
console.error('クリップボードへのコピーに失敗しました:', err);
alert('クリップボードへのコピーに失敗しました');
}
}
// クリップボードからペーストする関数
async function pasteFromClipboard(textareaId) {
const textarea = document.getElementById(textareaId);
try {
const text = await navigator.clipboard.readText();
textarea.value = text;
// ペースト後に自動保存
saveToUserStorage(true);
} catch (err) {
console.error('クリップボードからのペーストに失敗しました:', err);
alert('クリップボードからのペーストに失敗しました');
}
}
// テキストエリアをクリアする関数
function clearTextarea(textareaId) {
const textarea = document.getElementById(textareaId);
textarea.value = '';
saveToUserStorage(true); // クリアしたら自動保存
}
// 日本語小説フォーマットに合わせた字下げを適用する関数
function applyJapaneseIndent(text) {
if (!text) return '';
// テキストを行に分割
const lines = text.split('\n');
const processedLines = [];
for (let i = 0; i < lines.length; i++) {
const line = lines[i].trim();
// 空行はそのまま保持
if (line === '') {
processedLines.push('');
continue;
}
// 括弧類やMarkdown見出しで始まる行は字下げしない
const startsWithBracket = /^[「『（\(（【〔［｛]/.test(line);
const startsWithMarkdownHeader = /^#+/.test(line);
// 段落の開始を判定（常にtrue）
const isNewParagraph = true;
if (isNewParagraph && !startsWithBracket && !startsWithMarkdownHeader) {
// 段落の最初の行には全角スペース1文字分の字下げを追加
processedLines.push('　' + line);
} else {
// 段落の続きの行や括弧類で始まる行はそのまま
processedLines.push(line);
}
}
return processedLines.join('\n');
}
// 感嘆符・ハートマーク後のスペース処理関数
function addSpacesAfterMarks(text) {
if (!text) return '';
let processedText = text;
// 1. まず感嘆符・ハートマークの後に全角スペースを追加
const markPattern = /([!?！？♡♥❤]+)(\s*)/g;
processedText = processedText.replace(markPattern, function(match, marks, existingSpaces) {
// 既存のスペースを全角スペースに統一
const normalizedSpaces = existingSpaces.replace(/[ \u00A0]/g, '　');
// 全角スペースが既に1つ以上ある場合はそのまま、ない場合は1つ追加
if (normalizedSpaces.length >= 1) {
return marks + normalizedSpaces;
} else {
return marks + '　';
}
});
// 2. 閉じ括弧の直前のスペースを削除
processedText = processedText.replace(/([!?！？♡♥❤])　+([）」』】〕］｝])/g, '$1$2');
return processedText;
}
// 三点リーダーとダッシュの統一関数
function unifyEllipsisAndDash(text) {
if (!text) return '';
let processedText = text;
// 三点リーダーを2つ連続に統一（1つや3つ以上の場合も2つに）
processedText = processedText.replace(/…+/g, '……');
processedText = processedText.replace(/\.{3,}/g, '……');
// ダッシュを2つ連続に統一（1つや3つ以上の場合も2つに）
processedText = processedText.replace(/―+/g, '――');
processedText = processedText.replace(/-{2,}/g, '――');
return processedText;
}
// かぎ括弧内の句点削除関数
function removePeriodInQuotes(text) {
if (!text) return '';
let processedText = text;
// かぎ括弧内の文末句点を削除
processedText = processedText.replace(/「([^」]*)。」/g, '「$1」');
processedText = processedText.replace(/『([^』]*)。』/g, '『$1』');
return processedText;
}
// 数字表記統一関数（漢数字に統一）
function unifyNumbersToKanji(text) {
if (!text) return '';
let processedText = text;
// 基本的な数字の変換
const numberMap = {
'0': '〇', '1': '一', '2': '二', '3': '三', '4': '四',
'5': '五', '6': '六', '7': '七', '8': '八', '9': '九'
};
// 単独の数字を漢数字に変換（ただし、日付や時間、電話番号などは除外）
processedText = processedText.replace(/(?<![0-9])([0-9])(?![0-9])/g, function(match, digit) {
// 前後に数字がない単独の数字のみ変換
return numberMap[digit] || digit;
});
return processedText;
}
// 数字表記統一関数（算用数字に統一）
function unifyNumbersToArabic(text) {
if (!text) return '';
let processedText = text;
// 漢数字を算用数字に変換
const kanjiMap = {
'〇': '0', '一': '1', '二': '2', '三': '3', '四': '4',
'五': '5', '六': '6', '七': '7', '八': '8', '九': '9'
};
// 単独の漢数字を算用数字に変換
processedText = processedText.replace(/[〇一二三四五六七八九]/g, function(match) {
return kanjiMap[match] || match;
});
return processedText;
}
// 小説フォーマット統一ボタンのクリックイベントハンドラー
function applyNovelFormat(textareaId) {
const textarea = document.getElementById(textareaId);
let processedText = textarea.value;
// 1. 字下げ処理
processedText = applyJapaneseIndent(processedText);
// 2. 三点リーダーとダッシュの統一
processedText = unifyEllipsisAndDash(processedText);
// 3. かぎ括弧内の句点削除
processedText = removePeriodInQuotes(processedText);
// 4. 感嘆符・ハートマーク後のスペース処理
processedText = addSpacesAfterMarks(processedText);
// 5. 数字表記の統一（セレクトメニューの選択に基づく）
const numberFormatSelect = document.getElementById('numberFormatSelect');
const numberFormat = numberFormatSelect.value;
if (numberFormat === 'kanji') {
processedText = unifyNumbersToKanji(processedText);
} else if (numberFormat === 'arabic') {
processedText = unifyNumbersToArabic(processedText);
}
// 'none'の場合は何もしない
textarea.value = processedText;
saveToUserStorage(true); // フォーマット統一後に自動保存
}
</script>
</body>
</html>