kensaku-4
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>【カウンター機能付き】contenteditable と scrollIntoView</title>
<style>
body { font-family: sans-serif; padding: 1em; }
.container { display: flex; flex-direction: column; gap: 10px; }
.controls { display: flex; align-items: center; gap: 10px; }
/* 編集エリアをテキストエリアそっくりに見せるスタイル */
.editable-area {
width: 500px;
height: 200px;
border: 1px solid #767676;
padding: 8px;
overflow: auto; /* スクロールバーを表示 */
font-size: 16px;
line-height: 1.5;
background-color: white;
white-space: pre-wrap; /* 改行とスペースを保持し、自動折り返しも行う */
}
/* 検索で見つかった箇所をハイライトするスタイル */
.highlight {
background-color: #ff0;
border-radius: 3px;
}
/* カウンター用のスタイル */
#searchCounter {
font-size: 0.9em;
color: #333;
min-width: 50px; /* (1 / 1) のような表示でも幅が安定するように */
}
</style>
</head>
<body>
<h1>【カウンター機能付き】編集エリア内検索 & ジャンプ機能</h1>
<div class="container">
<div class="controls">
<input type="text" id="searchInput" placeholder="検索キーワード">
<input type="button" value="次を検索" onclick="findNext()">
<span id="searchCounter"></span>
</div>
<div id="editor" class="editable-area" contenteditable="true"></div>
</div>
<script>
const editor = document.getElementById('editor');
const searchInput = document.getElementById('searchInput');
// ▼▼▼ カウンター要素を取得 ▼▼▼
const counterElement = document.getElementById('searchCounter');
const sampleText = "このテキストエリアは、長文の入力が可能です。\nJavaScriptを使うことで、様々な便利機能を追加できます。例えば、このように検索�{タンを押すと、指定したキーワードの場所までカーソルがジャンプします。\nもう一度「次を検索」�{タンを押すと、次の「キーワード」に移動します。JavaScriptの可能性は無限大です。\nぜひ、このサンプルを改造して、あなただけの機能を作ってみてください。\n最後のキーワードはこちらです。\n\n";
editor.innerText = sampleText.repeat(5);
let currentMatches = [];
let currentIndex = -1;
function findNext() {
const keyword = searchInput.value;
if (!keyword) {
alert('検索キーワードを入力してください。');
return;
}
// 検索キーワードが変わった場合、ハイライトとカウンターをリセットして再検索
if (editor.dataset.lastKeyword !== keyword) {
removeHighlights();
editor.dataset.lastKeyword = keyword;
const regex = new RegExp(keyword, 'gi');
editor.innerHTML = editor.innerText.replace(regex, `<span class="highlight">${keyword}</span>`);
currentMatches = Array.from(editor.querySelectorAll('.highlight'));
currentIndex = -1;
}
// �}ッチするものがなければ処理を終了
if (currentMatches.length === 0) {
alert('キーワードが見つかりませんでした。');
counterElement.textContent = '(0 / 0)'; // カウンターを更新
return;
}
// 次の要素へインデックスを進める（末尾まで行ったら先頭に戻る）
currentIndex = (currentIndex + 1) % currentMatches.length;
// ▼▼▼ カウンターの表示を更新 ▼▼▼
// currentIndexは0から始まるので、表示するときは+1する
counterElement.textContent = `(${currentIndex + 1} / ${currentMatches.length})`;
const currentElement = currentMatches[currentIndex];
currentElement.scrollIntoView({
behavior: 'smooth',
block: 'center'
});
currentMatches.forEach(el => el.style.backgroundColor = '#ff0');
currentElement.style.backgroundColor = '#ffa500';
}
function removeHighlights() {
if (editor.dataset.lastKeyword) {
editor.innerHTML = editor.innerText;
counterElement.textContent = ''; // カウンターをクリア
}
}
</script>
</body>
</html>
使用変数
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>【カウンター機能付き】contenteditable と scrollIntoView</title>
<style>
body { font-family: sans-serif; padding: 1em; }
.container { display: flex; flex-direction: column; gap: 10px; }
.controls { display: flex; align-items: center; gap: 10px; }
/* 編集エリアをテキストエリアそっくりに見せるスタイル */
.editable-area {
width: 500px;
height: 200px;
border: 1px solid #767676;
padding: 8px;
overflow: auto; /* スクロールバーを表示 */
font-size: 16px;
line-height: 1.5;
background-color: white;
white-space: pre-wrap; /* 改行とスペースを保持し、自動折り返しも行う */
}
/* 検索で見つかった箇所をハイライトするスタイル */
.highlight {
background-color: #ff0;
border-radius: 3px;
}
/* カウンター用のスタイル */
#searchCounter {
font-size: 0.9em;
color: #333;
min-width: 50px; /* (1 / 1) のような表示でも幅が安定するように */
}
</style>
</head>
<body>
<h1>【カウンター機能付き】編集エリア内検索 & ジャンプ機能</h1>
<div class="container">
<div class="controls">
<input type="text" id="searchInput" placeholder="検索キーワード">
<input type="button" value="次を検索" onclick="findNext()">
<span id="searchCounter"></span>
</div>
<div id="editor" class="editable-area" contenteditable="true"></div>
</div>
<script>
const editor = document.getElementById('editor');
const searchInput = document.getElementById('searchInput');
// ▼▼▼ カウンター要素を取得 ▼▼▼
const counterElement = document.getElementById('searchCounter');
const sampleText = "このテキストエリアは、長文の入力が可能です。\nJavaScriptを使うことで、様々な便利機能を追加できます。例えば、このように検索�{タンを押すと、指定したキーワードの場所までカーソルがジャンプします。\nもう一度「次を検索」�{タンを押すと、次の「キーワード」に移動します。JavaScriptの可能性は無限大です。\nぜひ、このサンプルを改造して、あなただけの機能を作ってみてください。\n最後のキーワードはこちらです。\n\n";
editor.innerText = sampleText.repeat(5);
let currentMatches = [];
let currentIndex = -1;
function findNext() {
const keyword = searchInput.value;
if (!keyword) {
alert('検索キーワードを入力してください。');
return;
}
// 検索キーワードが変わった場合、ハイライトとカウンターをリセットして再検索
if (editor.dataset.lastKeyword !== keyword) {
removeHighlights();
editor.dataset.lastKeyword = keyword;
const regex = new RegExp(keyword, 'gi');
editor.innerHTML = editor.innerText.replace(regex, `<span class="highlight">${keyword}</span>`);
currentMatches = Array.from(editor.querySelectorAll('.highlight'));
currentIndex = -1;
}
// �}ッチするものがなければ処理を終了
if (currentMatches.length === 0) {
alert('キーワードが見つかりませんでした。');
counterElement.textContent = '(0 / 0)'; // カウンターを更新
return;
}
// 次の要素へインデックスを進める（末尾まで行ったら先頭に戻る）
currentIndex = (currentIndex + 1) % currentMatches.length;
// ▼▼▼ カウンターの表示を更新 ▼▼▼
// currentIndexは0から始まるので、表示するときは+1する
counterElement.textContent = `(${currentIndex + 1} / ${currentMatches.length})`;
const currentElement = currentMatches[currentIndex];
currentElement.scrollIntoView({
behavior: 'smooth',
block: 'center'
});
currentMatches.forEach(el => el.style.backgroundColor = '#ff0');
currentElement.style.backgroundColor = '#ffa500';
}
function removeHighlights() {
if (editor.dataset.lastKeyword) {
editor.innerHTML = editor.innerText;
counterElement.textContent = ''; // カウンターをクリア
}
}
</script>
</body>
</html>
使用変数
| backgroundColor | |
| charset | |
| class | |
| contenteditable | |
| counterElement | |
| currentElement | |
| currentIndex | |
| currentMatches | |
| editor | |
| el | |
| findNext -------( Function ) | |
| id | |
| innerHTML | |
| innerText | |
| keyword | |
| lang | |
| lastKeyword | |
| length | |
| onclick | |
| placeholder | |
| regex | |
| removeHighlights -------( Function ) | |
| sampleText | |
| searchInput | |
| textContent | |
| type | |
| value |