概要
今回は React で文字列のハイライトロジックを作成してみます。
react-highlight-words とか便利なものがありますが、お勉強のために自前で組んでみようと思います！
実現する機能
- 検索対象が同一単語で複数ある場合でもハイライトする
- 検索キーワード ：おはよう
- 検索検索元の文字列：おはようおはよう
- ハイライト後の文字：おはようおはよう
- 検索文字列が複数個でもハイライトする
- 検索キーワード① ：おはよう
- 検索キーワード② ：こんばんは
- 検索検索元の文字列：おはよう。こんばんは。
- ハイライト後の文字：おはよう。こんばんは。
- 検索文字列が複数かつ重複があってもハイライトする
- 検索キーワード① ：おはよう
- 検索キーワード② ：よう。こん
- 検索検索元の文字列：おはよう。こんばんは。
- ハイライト後の文字：おはよう。こんばんは。
実際のコード
import _ from "lodash";
import parser from "react-html-parser";
import "./styles.css";
export default function App() {
return (
<div className="App">
<h1>ハイライトサンプル</h1>
<div>
<Highlighter
originStr={"僕は行きつけの定食屋でいつも半ライス大盛りと頼みます。"}
keywords={["僕は", "半ライス", "ライス大盛り"]}
/>
</div>
</div>
);
}
/**
* キーワードに応じてハイライト開始～終了位置を返却する
* @param {String} originStr 検索元の文字列
* @return {Array} keywords 検索キーワード
*/
function makeHighlightIndexes(originStr = "", keywords = []) {
const getHighlightIndexes = (keyword = "") => {
const indexes = [];
for (let i = 0; i < originStr.length; i++) {
i = originStr.indexOf(keyword, i);
if (i === -1) break; // ハイライト対象がなければbreak
for (let j = 0; j < keyword.length; j++) indexes.push(i + j);
}
return indexes;
};
const highlightIndexes = keywords.flatMap((keyword) =>
getHighlightIndexes(keyword)
);
// ハイライト対象の開始～終了位置を重複削除&昇順にして返却する
return _.sortBy(_.uniq(highlightIndexes));
}
/**
* ハイライト処理を実施するコンポーネント
* @param {String} originStr 検索元の文字列
* @return {Array} keywords 検索キーワード
*/
function Highlighter({ originStr = "", keywords = [] }) {
let isInsertStartHtmlTag = true; // HTML開始タグ挿入用フラグ
const highlightIndexes = makeHighlightIndexes(originStr, keywords);
const highlightHtmlElement = [...originStr].reduce(
(accumulator, currentValue, currentIndex) => {
const isHighlight = highlightIndexes.includes(currentIndex);
if (isHighlight && isInsertStartHtmlTag) {
isInsertStartHtmlTag = false;
return `${accumulator}<mark>${currentValue}`;
}
// 次の要素が連番ではない = ハイライト対象ではないのでHTML終了タグを挿入する
const isInsertEndHtmlTag = !highlightIndexes.includes(currentIndex + 1);
if (isHighlight && isInsertEndHtmlTag) {
isInsertStartHtmlTag = true; // 次の要素にHTML開始タグを挿入できようにtrueにする
return `${accumulator}${currentValue}</mark>`;
}
return accumulator + currentValue;
},
""
);
// 文字列をHTMLに変換して返却する
return parser(highlightHtmlElement);
}
codesandbox でも公開しているので、自由にご参照ください！
解説
makeHighlightIndexes関数
/**
* キーワードに応じてハイライト開始～終了位置を返却する
* @param {String} originStr 検索元の文字列
* @return {Array} keywords 検索キーワード
*/
function makeHighlightIndexes(originStr = "", keywords = []) {
const getHighlightIndexes = (keyword = "") => {
const indexes = [];
for (let i = 0; i < originStr.length; i++) {
i = originStr.indexOf(keyword, i);
if (i === -1) break; // ハイライト対象がなければbreak
for (let j = 0; j < keyword.length; j++) indexes.push(i + j);
}
return indexes;
};
const highlightIndexes = keywords.flatMap((keyword) =>
getHighlightIndexes(keyword)
);
// ハイライト対象の開始～終了位置を重複削除&昇順にして返却する
return _.sortBy(_.uniq(highlightIndexes));
}
キーワードに応じてハイライト開始～終了位置を返却する関数です。
例えば、各引数の値が以下の場合だと戻り値は [0, 1, 2] を返却します。
- originStr（検索元の文字列）
- "おはよう"
- keywords（検索キーワード）
- ["おは", "よう"]
Highlighterコンポーネント
/**
* ハイライト処理を実施するコンポーネント
* @param {String} originStr 検索元の文字列
* @return {Array} keywords 検索キーワード
*/
function Highlighter({ originStr = "", keywords = [] }) {
let isInsertStartHtmlTag = true; // HTML開始タグ挿入用フラグ
const highlightIndexes = makeHighlightIndexes(originStr, keywords);
const highlightHtmlElement = [...originStr].reduce(
(accumulator, currentValue, currentIndex) => {
const isHighlight = highlightIndexes.includes(currentIndex);
if (isHighlight && isInsertStartHtmlTag) {
isInsertStartHtmlTag = false;
return `${accumulator}<mark>${currentValue}`;
}
// 次の要素が連番ではない = ハイライト対象ではないのでHTML終了タグを挿入する
const isInsertEndHtmlTag = !highlightIndexes.includes(currentIndex + 1);
if (isHighlight && isInsertEndHtmlTag) {
isInsertStartHtmlTag = true; // 次の要素にHTML開始タグを挿入できようにtrueにする
return `${accumulator}${currentValue}</mark>`;
}
return accumulator + currentValue;
},
""
);
// 文字列をHTMLに変換して返却する
return parser(highlightHtmlElement);
}
ハイライト処理を実施するコンポーネントです。
少し複雑なので細かめに説明します。
例として各引数の値が以下の場合を想定して進めます。
- originStr（検索元の文字列）
- "おはようございます"
- keywords（検索キーワード）
- ["おは", "ござ"]
const highlightIndexes = makeHighlightIndexes(originStr, keywords);
まず、highlightIndexes は [0, 1, 4, 5] を返却します。
これは「おはようございます」に対して「おは」と「ござ」がハイライト対象ということになります。
const highlightHtmlElement = [...originStr].reduce(
(accumulator, currentValue, currentIndex) => {/* 中略 */}, "")
ハイライトの開始と終了位置に mark タグを挿入して（この部分は後述で説明します）、最終的に一つの文字列にしたいので reduce関数を用いてます。
const isHighlight = highlightIndexes.includes(currentIndex);
if (isHighlight && isInsertStartHtmlTag) {
isInsertStartHtmlTag = false;
return `${accumulator}<mark>${currentValue}`;
}
ハイライト対象（おは or ござ）かつ、その先頭文字（お or ご）の場合は mark 開始タグを挿入します。
// 次の要素が連番ではない = ハイライト対象ではないのでHTML終了タグを挿入する
const isInsertEndHtmlTag = !highlightIndexes.includes(currentIndex + 1);
if (isHighlight && isInsertEndHtmlTag) {
isInsertStartHtmlTag = true; // 次の要素にHTML開始タグを挿入できようにtrueにする
return `${accumulator}${currentValue}</mark>`;
}
ハイライト対象（おは or ござ）かつ、次の文字が（よ or い）の場合は mark 終了タグを挿入します。
return accumulator + currentValue;
ハイライト対象以外の文字は単純に累積します。
// 文字列をHTMLに変換して返却する
return parser(highlightHtmlElement);
highlightHtmlElement は mark タグ混みの文字列となっているので、HTML オブジェクトに変換が必要になります。
なので、react-html-parser を用いて変換をしています。
以上。
終わりに
もっと複雑になるかなと思ってましたが、意外とシンプルに実装できました。
久々にこんなに頭を使いました笑
今度は全角 ⇔ 半角を変換してハイライト表示できたらなと考えてます！
今回も見ていただきありがとうございました🙇♂️