AWtnb/index.html

## index.html
<!DOCTYPE html>

<style>
form {
    margin-left: 1.5em;
}

td, tr {
    border: 1px solid;
    vertical-align: baseline;
}

strong {
    color: red;
}

.loading {
    width: 15px;
    height: 15px;
    border: 5px solid #1c1c3f;
    border-right: 5px solid transparent;
    border-radius: 30px;
    animation: loading 1s linear infinite;
    margin-left: 2em;
}

@keyframes loading {
    to {
    }
    from {
        transform: rotate(360deg);
        transform-origin: 50% 50%;
    }
}
</style>

<!-- ------------------------------ -->

<body>

<p>① 処理したい文字列を Excel から下のボックスにコピー＆ペースト</p>
<p><strong>1000項目以上をまとめて処理しようとするとフリーズします。<br>フリーズした場合も数分間放置すれば処理が終わりますが小分けの処理を推奨します。</strong></p>
<p>
<form name="form_toImport">
<textarea name="textarea1" cols="80" rows="2" placeholder="ここにペースト！"></textarea>
</form>
</p>

<p>② <input type="button" value="表に読み込み！" onclick="clickBtn_import()" /></p>

<p>③ 色を変えたい文字を下のボックスに入力</p>

<p>
<form name="form_toMark">
<textarea name="textarea1" cols="40" rows="3" placeholder="ここに入力！"></textarea>
</form>
</p>

<p>④ 着色したい列は左から何列目ですか？
<form name="form_markCol">
<select name="select1">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
    <option value="11">11</option>
    <option value="12">12</option>
    <option value="13">13</option>
    <option value="14">14</option>
    <option value="15">15</option>
</select>
</form>
</p>

<p>⑤ <input type="button" value="着色！" onclick="clickBtn_mark()" /></p>

<div id="loading" class="loading" style="display:none;"></div>

<p>⑥ <input type="button" value="結果をコピー！" onclick="copyResult()" /></p>

<hr>


<table id="table1"></table>

<!-- my javascript functions -->

<script>

function clickBtn_import() {
    const tsv_toImport = document.form_toImport.textarea1.value;
    import2table(tsv_toImport);
}

function resetTable(){
    const resultTable = document.getElementById("table1");
    const maxRow = resultTable.rows.length;
    if (maxRow > 1) {
        for (let r = maxRow - 1; r >= 0; r--) {
            resultTable.deleteRow(r);
        }
    }
}

function import2table(lines) {
    const resultTable = document.getElementById("table1");
    resetTable();
    const array = lines.split(/[\r\n]+/g);
    for (let i = 0; i < array.length; i++) {
        const line = array[i];
        if (line.match(/./)){
            const row = resultTable.insertRow(-1);
            const cells = line.split(/\t/g);
            for (let i = 0; i < cells.length; i++) {
                 const currentCell = row.insertCell(i);
                 currentCell.innerText = cells[i];
            }
        }
    }
}

function clickBtn_mark() {
    const colIndexToMark = document.form_markCol.select1.value;
    document.getElementById("loading").style.display = "block";
    alert("↓「OK」を押すと処理を開始します。")
    decorateTable(colIndexToMark);
    document.getElementById("loading").style.display = "none";
}

function addStrongTagToCell(r, c, patterns){
    const targetTable = document.getElementById("table1");
    const targetCell = targetTable.rows[r].cells[c];
    if (targetCell.firstChild) {
        let text = targetCell.innerText;
        for (let i = 0; i < patterns.length; i++) {
            const reg = new RegExp(patterns[i], "g");
            text = text.replace(reg, '<strong>$1</strong>');
        }
        targetCell.innerHTML = text;
    }
}

function createPromise(r, c, patterns){
    return new Promise((resolve, reject) => {
        addStrongTagToCell(r, c, patterns);
        resolve();
    });
}

const chunkArray = ([...array], size = 1) => {
  return array.reduce((acc, value, index) => index % size ? acc : [...acc, array.slice(index, index + size)], []);
}

function decorateTable(colIndex) {
    const wordList = document.form_toMark.textarea1.value;
    const escaped = wordList.replace(/[\\^$.*+?()[\]{}|]/g, '\\$&');
    const keywordArray = escaped.split(/[\r\n]+/).filter(t => t.match(/./));
    const sortByLength = keywordArray.sort((a, b) => {return b.length - a.length});
    const patterns = chunkArray(sortByLength, 40).map(chunk => {
            return "(" + chunk.join("|") + ")";
    });

    const targetTable = document.getElementById("table1");
    const maxRow = targetTable.rows.length;
    const promiseArray = [];
    for (let r = 0; r < maxRow; r++) {
        promiseArray.push(createPromise(r, (colIndex - 1), patterns));
    }
    Promise.all(promiseArray).then(() => {
        alert("処理終了！")
    });
}

function copyResult(){
    const range = document.createRange();
    const result = document.getElementById("table1");
    range.selectNodeContents(result);
    const selection = window.getSelection();
    selection.removeAllRanges();
    selection.addRange(range);
    document.execCommand("Copy");
    alert("コピーしました！");
}

</script>

</body>
	<!DOCTYPE html>

	<style>
	form {
	margin-left: 1.5em;
	}

	td, tr {
	border: 1px solid;
	vertical-align: baseline;
	}

	strong {
	color: red;
	}

	.loading {
	width: 15px;
	height: 15px;
	border: 5px solid #1c1c3f;
	border-right: 5px solid transparent;
	border-radius: 30px;
	animation: loading 1s linear infinite;
	margin-left: 2em;
	}

	@keyframes loading {
	to {
	}
	from {
	transform: rotate(360deg);
	transform-origin: 50% 50%;
	}
	}
	</style>

	<!-- ------------------------------ -->

	<body>

	<p>① 処理したい文字列を Excel から下のボックスにコピー＆ペースト</p>
	<p><strong>1000項目以上をまとめて処理しようとするとフリーズします。<br>フリーズした場合も数分間放置すれば処理が終わりますが小分けの処理を推奨します。</strong></p>
	<p>
	<form name="form_toImport">
	<textarea name="textarea1" cols="80" rows="2" placeholder="ここにペースト！"></textarea>
	</form>
	</p>

	<p>② <input type="button" value="表に読み込み！" onclick="clickBtn_import()" /></p>

	<p>③ 色を変えたい文字を下のボックスに入力</p>

	<p>
	<form name="form_toMark">
	<textarea name="textarea1" cols="40" rows="3" placeholder="ここに入力！"></textarea>
	</form>
	</p>

	<p>④ 着色したい列は左から何列目ですか？
	<form name="form_markCol">
	<select name="select1">
	<option value="1">1</option>
	<option value="2">2</option>
	<option value="3">3</option>
	<option value="4">4</option>
	<option value="5">5</option>
	<option value="6">6</option>
	<option value="7">7</option>
	<option value="8">8</option>
	<option value="9">9</option>
	<option value="10">10</option>
	<option value="11">11</option>
	<option value="12">12</option>
	<option value="13">13</option>
	<option value="14">14</option>
	<option value="15">15</option>
	</select>
	</form>
	</p>

	<p>⑤ <input type="button" value="着色！" onclick="clickBtn_mark()" /></p>

	<div id="loading" class="loading" style="display:none;"></div>

	<p>⑥ <input type="button" value="結果をコピー！" onclick="copyResult()" /></p>

	<hr>


	<table id="table1"></table>

	<!-- my javascript functions -->

	<script>

	function clickBtn_import() {
	const tsv_toImport = document.form_toImport.textarea1.value;
	import2table(tsv_toImport);
	}

	function resetTable(){
	const resultTable = document.getElementById("table1");
	const maxRow = resultTable.rows.length;
	if (maxRow > 1) {
	for (let r = maxRow - 1; r >= 0; r--) {
	resultTable.deleteRow(r);
	}
	}
	}

	function import2table(lines) {
	const resultTable = document.getElementById("table1");
	resetTable();
	const array = lines.split(/[\r\n]+/g);
	for (let i = 0; i < array.length; i++) {
	const line = array[i];
	if (line.match(/./)){
	const row = resultTable.insertRow(-1);
	const cells = line.split(/\t/g);
	for (let i = 0; i < cells.length; i++) {
	const currentCell = row.insertCell(i);
	currentCell.innerText = cells[i];
	}
	}
	}
	}

	function clickBtn_mark() {
	const colIndexToMark = document.form_markCol.select1.value;
	document.getElementById("loading").style.display = "block";
	alert("↓「OK」を押すと処理を開始します。")
	decorateTable(colIndexToMark);
	document.getElementById("loading").style.display = "none";
	}

	function addStrongTagToCell(r, c, patterns){
	const targetTable = document.getElementById("table1");
	const targetCell = targetTable.rows[r].cells[c];
	if (targetCell.firstChild) {
	let text = targetCell.innerText;
	for (let i = 0; i < patterns.length; i++) {
	const reg = new RegExp(patterns[i], "g");
	text = text.replace(reg, '<strong>$1</strong>');
	}
	targetCell.innerHTML = text;
	}
	}

	function createPromise(r, c, patterns){
	return new Promise((resolve, reject) => {
	addStrongTagToCell(r, c, patterns);
	resolve();
	});
	}

	const chunkArray = ([...array], size = 1) => {
	return array.reduce((acc, value, index) => index % size ? acc : [...acc, array.slice(index, index + size)], []);
	}

	function decorateTable(colIndex) {
	const wordList = document.form_toMark.textarea1.value;
	const escaped = wordList.replace(/[\\^$.*+?()[\]{}\|]/g, '\\$&');
	const keywordArray = escaped.split(/[\r\n]+/).filter(t => t.match(/./));
	const sortByLength = keywordArray.sort((a, b) => {return b.length - a.length});
	const patterns = chunkArray(sortByLength, 40).map(chunk => {
	return "(" + chunk.join("\|") + ")";
	});

	const targetTable = document.getElementById("table1");
	const maxRow = targetTable.rows.length;
	const promiseArray = [];
	for (let r = 0; r < maxRow; r++) {
	promiseArray.push(createPromise(r, (colIndex - 1), patterns));
	}
	Promise.all(promiseArray).then(() => {
	alert("処理終了！")
	});
	}

	function copyResult(){
	const range = document.createRange();
	const result = document.getElementById("table1");
	range.selectNodeContents(result);
	const selection = window.getSelection();
	selection.removeAllRanges();
	selection.addRange(range);
	document.execCommand("Copy");
	alert("コピーしました！");
	}

	</script>

	</body>