最近、マルチモーダル ドキュメント エディター (flowmix/docx) を開発しているときに、次の機能シナリオのようなフルテキスト検索と置換の実装という、非常に興味深い機能要件に遭遇しました。

写真

要約すると、次のコア機能を実装する必要があります。

• 全文検索と検索テキストの強調表示。
• 検索結果の自動的な位置特定と切り替えをサポートします。
• 検索したテキストのワンクリック置換をサポートします。

最初に考えたのは、選択 API を使用してテキストの一致と検索を実装することでした。

写真

Selectionオブジェクトは、ユーザーが選択したテキストの範囲、またはキャレットの現在の位置を表します。ページ上のテキスト選択領域を表し、複数の要素にまたがる場合もあります。テキスト選択領域は、ユーザーがテキスト上でマウスをドラッグすることで作成されます。Selectionオブジェクトを取得して内容を確認したり変更したりするには、 window.getSelection()を呼び出します。

ブラウザ互換性の観点から見ると、選択APIは非常に信頼性が高く、現在多くのクラウドドキュメントエディターがこのJS APIを使用して同様の機能を実装しています。

したがって、この流れに従えば、オープンソース市場には、同様の機能を実現するのに役立つ比較的成熟したオープンソースライブラリが存在するはずです。そこで私は、比較的成熟したテキスト検索ライブラリをいくつか調査し、誰もが同様の機能をより効率的に実装できるようにするためのライブラリを厳選しました。

1. マーク.js

写真

markjs は JavaScript で書かれたテキスト強調表示ツールです。

次のような特徴があります。

1. 検索用語に動的にタグを付けたり、カスタム正規表現を使用したりすることができます📋。
2. 分音記号のサポート、個々の単語の検索、カスタム同義語、iframe サポート、カスタム フィルター、精度の定義、カスタム要素、カスタム クラス名など、多数の組み込みオプションを提供します。
3. 複数の使用オプションが用意されており、純粋な JavaScript で使用することも、jQuery プラグインとして使用することもできます。
4. ダウンロード方法は複数あります。npm または Bower 経由でインストールするか、手動でダウンロードすることができます。
5. 使いやすさを考慮した CDN サービスを提供します。
6. API は豊富で、インスタンスの初期化、キーワードのマーク付け (mark())、カスタム正規表現のマーク付け (markRegExp())、範囲のマーク付け (markRanges())、マークの削除 (unmark()) などのメソッドが含まれており、それぞれ詳細なパラメータの説明が付いています。
7. 互換性も高く、すべての最新ブラウザで使用できます。
8. 要素名やクラス名、除外、単語検索、精度、分音記号など、理解しにくい可能性のあるオプションを詳しく説明するチュートリアルが提供されています。

興味があれば、GitHub で確認してみてください。

GitHub アドレス: https://github.com/julmot/mark.js

2. テキストハイライター

Text Highlighter は、テキストエリア内の検索結果をハイライト表示するための軽量な JavaScript クラスです。複数のテキストエリアに対応し、レスポンシブデザインにも対応し、元の背景を維持します。大文字と小文字を区別した検索、単語の一致、結果のカウント、ナビゲーション機能も備えています。設定は不要で使いやすく、テキスト検索エクスペリエンスの向上が必要な Web アプリケーションに最適です。

GitHub アドレス: https://github.com/funktechno/texthighlighter

3. Vue-検索-ハイライト

写真

vue-search-highlight は、Vue.js で実装された検索ハイライトコンポーネントで、HTML コンテンツタグ間のキーワードマッチングをサポートします。コンポーネントとしての使用は非常に簡単です。以下はインストールと実装の手順です。

写真

Vue に精通している場合は、このオープンソース プロジェクトを参照して学習することもできます。

GitHub アドレス: https://github.com/wintc23/vue-search-highlight

これらは、二次開発を通じてテキスト検索のハイライトを迅速に実装するために私が発見した解決策です。もちろん、ブラウザにはCSS経由でコンテンツ検索のハイライトを可能にする新しい機能もあり、正式にはCSS Custom Highlight APIと呼ばれています。これを使えば、DOM構造を変更することなく、任意のテキストのスタイルをカスタマイズできます。例えば、次のようになります。

写真

これは私がMDNに書いたケーススタディです。ほんの数行のコードでテキスト検索のハイライトを実現できます。興味のある方はぜひご覧ください。個人的にテストしましたが、ブラウザの互換性はあまり良くないので、注意して使用してください。

やっと

将来的には、flowmix/docxマルチモーダルドキュメントエディタに全文検索とハイライト機能を実装する予定です。上記でご紹介したソリューションを参考に、低コストかつ高効率でお客様のご要望を実現してください。

私たちは最近、Flowmix/Docxマルチモーダルドキュメントエンジンをベースとしたドキュメント管理SaaSシステムを開発しました。概要は以下のとおりです。

写真

ユーザーは登録することで、独自のコンテンツやナレッジ ドキュメントを管理し、ワンクリックで自分専用のナレッジ ベースを生成できます。

こちらから体験してください: http://orange.turntip.cn/doc

ユーザーのニーズと計画されたイテレーションスケジュールに基づき、毎月継続的にイテレーションを実施しています。Flowmix Visionをフォローして最新情報を入手してください。

もちろん、ユーザー エクスペリエンスの観点から、ドキュメント作成機能の価値を最大化するために、引き続き最適化と反復を行い、業界のベスト プラクティスを組み合わせていきます。

写真

エディターバージョンのデモアドレス: http://flowmix.turntip.cn/docx