テキスト検索アプリ
テキスト文字列：
検索する文字列：
検出した文字列の個数：
プリセット登録：
登録したプリセット
| プリセット名 | 操作 |
|---|
以下が要望に基づく実装例です。JavaScriptのevalや他サイトへの遷移、リダイレクトは含んでいません。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>テキスト検索アプリ</title>
</head>
<body>
<h1>テキスト検索アプリ</h1>
<p>テキスト文字列：<input type="text" id="text"></p>
<p>検索する文字列：<input type="text" id="keyword"></p>
<button onclick="search()">検索</button>
<p>検出した文字列の個数：<span id="count"></span></p>
<p>プリセット登録：<input type="text" id="preset"><button onclick="addPreset()">登録</button></p>
<h2>登録したプリセット</h2>
<table>
<thead>
<tr>
<th>プリセット名</th>
<th>操作</th>
</tr>
</thead>
<tbody id="presetList">
</tbody>
</table>
<script>
let presets = []; // 登録したプリセット
// 検索を実行し、検出した文字列の個数を表示する
function search() {
let text = document.getElementById("text").value;
let keyword = document.getElementById("keyword").value;
let regex = new RegExp(keyword, "g");
let count = (text.match(regex) || []).length;
document.getElementById("count").textContent = count;
}
// プリセットを登録し、一覧に表示する
function addPreset() {
let preset = document.getElementById("preset").value;
if (presets.includes(preset)) {
alert("既に登録されたプリセットです。");
return;
}
presets.push(preset);
updatePresetList();
}
// プリセットの一覧を更新する
function updatePresetList() {
let presetList = document.getElementById("presetList");
presetList.innerHTML = "";
for (let i = 0; i < presets.length; i++) {
let tr = document.createElement("tr");
let name = document.createElement("td");
let buttonTd = document.createElement("td");
let button = document.createElement("button");
name.textContent = presets[i];
button.textContent = "読み込み";
button.onclick = function() {
document.getElementById("preset").value = presets[i];
search();
};
buttonTd.appendChild(button);
tr.appendChild(name);
tr.appendChild(buttonTd);
presetList.appendChild(tr);
}
}
</script>
</body>
</html>