javascript - Java Script を使用したクライアントマシンでの全文ベースの検索

Question

クライアントマシンに全文ベースの検索機能を実装しようとしています。

Lunr.jsが私の要件を部分的に満たしていることがわかりましたが、Apache などのサーバーにロードする必要があり、完全に機能します。

私の場合、クライアントマシンにはサーバーも DB もインストールされません。ディレクトリには一連の静的 HTML ファイルがあり、検索ボックスからのユーザーの入力を受け入れる 1 つのインデックスファイルがあり、これらの静的 HTML ファイルでこの文字列を検索します。

Google 検索で、私のプロジェクトに必要な (かもしれない) 興味深い単語がいくつか見つかりました: innerHtml、DOM、iframesおよびRegExp.

私の質問をあなたの答えにまとめてください。前もって感謝します

score 2 · Accepted Answer

これを行うには、XMLHttpRequest を使用してローカルファイルをフェッチする方法が 1 つあります。これはデフォルトでは許可されていませんが、たとえば chromium は次のパラメーターで開始できます。

--allow-file-access-from-files

見たいすべてのファイルを調べて、html タグを取り除いて正規表現を実行することで手動で検索を実装する必要がありますが、それは難しいことではありません。

クロムで次のコードをテストしました。

var xmlhttp = new XMLHttpRequest();
var url = "file:///your-file.html";

xmlhttp.open('GET', url, true);
xmlhttp.onerror = function(e) { console.log('Problems' + e); };

xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState === 4 && xmlhttp.status === 0) {
        console.log("Fetched: ");
        console.log(xmlhttp.responseText);

    }
    if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
        // ....
    }
    else if (xmlhttp.readyState==4 && xmlhttp.status != 200) {
        // ....
    }
}

xmlhttp.send();

score 1 · Accepted Answer

この方法で使用しようとしたことはありませんが、jIO ( Github )を参照してください。

jIO を使用して、複数のストレージ (ブラウザー localstorage、webDav、xWiki、S3...) にわたって JSON ドキュメントを管理および同期できます。ストレージにはインデックスを付けることができ、jIO には、complexQueries と呼ばれる独自のクエリモジュールが付属しており、スタンドアロンでも使用できます。

Ajax 経由でページをリクエストし、ページの全文/HTML を抽出する場合は、それをドキュメントとして jIO にダンプするだけです。

3 つの方法 (すべてjIO ドキュメントの例):

1) 単純な localstorage と複雑なクエリを使用する
検索可能にしたいすべてのドキュメントについて、jIO でドキュメントを作成します。したがって、jIO をセットアップした後:

var mySearchFiles = JIO.newJio({
    "type" : "local",
    "username" : "whatever",
    "application_name" : "fulltextsearch"
 });

次のように、完全な HTML/抽出テキスト (localstorage サイズ制限...) をドキュメントとして追加します。

mySearchFiles.put({
    "_id": "your_id",
    "search_result_string": "page_title/page_filename",
    "searchable_text": "your_text_to_be_searched_goes_here",
    function (err, response) {
        // console.log(response) =
        // {
        //  "ok": true,
        //  "id": "your_id",
        // }
    }

);

_id検索時に jIO から返されるものとして、または別のカスタムキーを使用します。

次に、allDocs メソッドを使用して jIO で複雑なクエリを実行します (複雑なクエリを試すページの例を次に示します)。

// here you construct your basic query
var query_object = {
    "query":{
        "filter": {
            // records from/to to be returned
            "limit":[0,10],
            // sort direction
            "sort_on":[[search_result_string, "ascending"]],
            // what fields to return
            "select_list":[["search_result_string"]]
        },
        // wildchard
        "wildcard_character":'%'
    }
};

// build your query - if user entered the variable "search_term":
var search = "searchable_text: = %" + search_term + "%"; 

// add to query object
query_object.query.query = search;

// run the search
mySearchFiles.allDocs(
   query_object,
   function (err, response){
      console.log(response);
   }
);

これにより、必要なが返されsearch_result_stringます。大きなテキストを検索する速度はわかりませんが、必要に応じてJSCC Parser Generatorを使用して独自の検索文法を作成できます。

2. 複雑なクエリのみを使用する ComplexQueries スタンドアロンで使用される、、およびメソッドを使用
できます。それがどのように機能するかについては、上記の例のページのリンクを確認してください。parseserializequery

基本的に、検索したいデータをオブジェクトリストとして利用できるようにする必要があり、クエリをシリアル化する必要があります。次に、次のように呼び出します。

var result = jIO.ComplexQueries.query(query, object_list);

もちろん、検索可能なデータを保持する場所が必要になるため、おそらく localStorage を併用します。

3. localStorage の上に indexStorage を追加する次の
ように、localStorage の上にインデックスを追加できます。

 mySearchFiles = JIO.newJio({
    "type": "indexed",
    "indices": [
        {"name":"index_name", "fields":["field_to_be_indexed_1"]},
        {"name":"index_name2", "fields":["field_to_be_indexed_1","field_to_be_indexed_2"]}
    ],
    "field_types": {
      "field_to_be_indexed_1": "string",
      "field_to_be_indexed_2": "string"
    },
    "sub_storage": {
      "type": "local",
      "username": "whatever",
      "application_name": "fulltextsearch"
    }
});

これにより、ローカルストレージに追加するすべてのドキュメントのインデックスが作成されます。これにより、たとえば、complexQueries を使用してすべてのファイルを掘り下げる前に、ファイルに対してキーワード検索を実行できます。そう：

mySearchFiles.put({
    "_id": "your_id",
    "search_result_string": "page_title/page_filename",
    "index_field": "keyword",
    "index_field2": "another_keyword",
    "searchable_text": "your_text_to_be_searched_goes_here",
    function (err, response) {
        // console.log(response) =
        // {
        //  "ok": true,
        //  "id": "your_id",
        // }
    }
  );

同じメソッドを呼び出すことができますが、JIO は常に最初にインデックスをクエリして結果を作成しようとします。実際には、これはリモートストレージの場所向けです (たとえば、S3 からの HTTP 要求ファイルの前にインデックスを検索します) が、それでも、使用できる可能性があります。

ご不明な点がございましたら、お知らせください。

score 0 · Accepted Answer

あなたのhtmlファイルは静的であるように聞こえますが、これが事実である場合、実際には各htmlファイルにテキストを含むjsonファイルを持つこともできます。

たとえば、foo.html と bar.html の 2 つの html ページがあるとします。次に、これらのそれぞれから関連するコンテンツを抽出し、次を含む json ファイルを作成できます。

[{
    "id": "foo.html",
    "text": "whatever text is in foo.html"
},{
    "id": "bar.html",
    "text": "whatever text is in bar.html"
}]

これは、たとえば、html を含むディレクトリに存在します。

- project_dir
-- foo.html
-- bar.html
-- index.json

その後、lunr.js でインデックスファイルを使用できます。

実際に index.json ファイルを作成する方法は、利用可能なツールによって異なりますが、ボイラーパイプや可読性などは異なります。ここで議論されているより多くのオプションがありますhttp://readwrite.com/2011/03/19/text-extraction

javascript - Java Script を使用したクライアント マシンでの全文ベースの検索

3 に答える 3

Related

Reference

javascript - Java Script を使用したクライアントマシンでの全文ベースの検索