0

「C#」タグは意図的に含まれていることに注意してください。これは、クライアント側とサーバー側の両方でこれを行うオプションがあるため、ここでの回答に C# 構文を受け入れることができるためです。以下の「知っておきたいこと」セクションをお読みください。また、正規表現を使用することがこの問題への最善のアプローチである可能性が高いため、「regex」タグが含まれています。

次のハイライト プラグインがここにあります。

http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html

そのプラグインのコードは次のとおりです。

/*

highlight v4

Highlights arbitrary terms.

<http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html>

MIT license.

Johann Burkard
<http://johannburkard.de>
<mailto:jb@eaio.com>

*/

jQuery.fn.highlight = function(pat) {
 function innerHighlight(node, pat) {
  var skip = 0;
  if (node.nodeType == 3) {
   var pos = node.data.toUpperCase().indexOf(pat);
   if (pos >= 0) {
    var spannode = document.createElement('span');
    spannode.className = 'highlight';
    var middlebit = node.splitText(pos);
    var endbit = middlebit.splitText(pat.length);
    var middleclone = middlebit.cloneNode(true);
    spannode.appendChild(middleclone);
    middlebit.parentNode.replaceChild(spannode, middlebit);
    skip = 1;
   }
  }
  else if (node.nodeType == 1 && node.childNodes && !/(script|style)/i.test(node.tagName)) {
   for (var i = 0; i < node.childNodes.length; ++i) {
    i += innerHighlight(node.childNodes[i], pat);
   }
  }
  return skip;
 }
 return this.length && pat && pat.length ? this.each(function() {
  innerHighlight(this, pat.toUpperCase());
 }) : this;
};

jQuery.fn.removeHighlight = function() {
 return this.find("span.highlight").each(function() {
  this.parentNode.firstChild.nodeName;
  with (this.parentNode) {
   replaceChild(this.firstChild, this);
   normalize();
  }
 }).end();
};

このプラグインは非常に簡単に機能します。

次の要素内の「Farm」という単語のすべてのインスタンスを強調表示したい場合...(続き)

<div id="#myDiv">Farmers farm at Farmer's Market</div>

...（続き）私がする必要があるのは、使用することだけです：

$("#myDiv").highlight("farm");

次に、「Farmers」と「Farmer's」の最初の 4 文字と、「farm」という単語全体を強調表示します。div#myDiv

問題ありませんが、これを使用したいと思います：

$("#myDiv").highlight("Farmers");

そして、「Farmers」と「Farmer's」の両方を強調表示します。もちろん、問題は実行時に検索語 (この例では「Farmers」という語) の値がわからないことです。したがって、文字列の各インデックスでアポストロフィが 1 つしかない可能性をすべて検出する必要があります。たとえば、$("#myDiv").highlight("Farmers");上記のコード例のように呼び出した場合、元の文字列の各インスタンスを強調表示する必要があります。さらに:

  • '農民
  • 農民
  • 農民
  • 農民
  • 農民
  • 農民
  • 農民
  • 農民'

もちろん、"Fa''rmers" のように、2 つ以上のアポストロフィが並んでいる場合は強調表示しないでください。

「Fa'rmer's」のような単語を (強調表示するために) 含めることができればいいと思いますが、運を押し付けるつもりはありません。上記の箇条書きリストにあるような一致を取得するだけでもうまくいくでしょう。 、文字列にはアポストロフィが 1 つだけ表示されます。

正規表現について考えましたが、構文がよくわかりません。また、true/false の戻り値では何もできないと思います。

ここで必要なことを達成する方法はありますか?

あなたが知りたいかもしれないこと:

  1. ハイライト プラグインは、必要なすべての大文字と小文字を区別しない要件を処理するので、それについて心配する必要はまったくありません。
  2. JavaScript、jQuery、さらには C# で提供される構文も受け入れられます。これは、クライアント側の値を使用する非表示の入力フィールドがサーバー側で C# コードに取り込まれていることを考慮するとです。

  3. 非表示の入力フィールドに入力する C# コードは Razor を使用します (つまり、私は C#.Net Web ページと WebMatrix 環境を使用しています。ただし、このコードは非常に単純で、次のようになります。

    for (var n = 0; n < searchTermsArray.Length; n++)

    {

    <input class="highlightTerm" type="hidden" value="@searchTermsArray[n]" />

    }

4

1 に答える 1

2

以前の質問からこの回答をコピーしています。

他の回答のコメントを読んだ後、あなたが何をしようとしているのかがわかったと思います。可能な入力に対してこれを実行できる単一の正規表現は必要ありません。すでに入力があり、それに一致する正規表現とそのバリエーションを構築する必要があります。あなたがする必要があるのはこれです。明確にするために、質問を誤解しているため、次の構文は実際には JavaScript にあります。

var re = new RegExp("'?" + "farmers".split("").join("'?") + "'?", "i")

これが行うことは、入力文字列を取得"farmers"し、それを個々の文字のリストに分割することです。

"farmers".split("") == [ 'f', 'a', 'r', 'm', 'e', 'r', 's' ]

次に、キャラクターを再びつなぎ合わせ"'?"ます。正規表現では、これは'文字がオプションになることを意味します。式の先頭と末尾に同じパーティクルを追加して、文字列の先頭と末尾にも一致させます。

これにより、元の文字列にも一致することが問題なければ、説明した方法で一致する正規表現が作成されます。

この場合、上記の行は次の正規表現を構築します。

/'?f'?a'?r'?m'?e'?r'?s'?/

編集

これと使用している関数を少し調べた後、ハイライト関数を変更して、単純な文字列置換の代わりに正規表現を使用するのが最善の策だと思います。扱いもそこまで難しくないと思います。これは、完全にテストされていない刺し傷です。

function innerHighlight(node, pat) {
    var skip = 0;
    if (node.nodeType == 3) {
        var matchResult = pat.exec(node.data);  // exec the regex instead of toUpperCase-ing the string
        var pos = matchResult !== null ? matchResult.index : -1;  // index is the location of where the matching text is found
        if (pos >= 0) {
            var spannode = document.createElement('span');
            spannode.className = 'highlight';
            var middlebit = node.splitText(pos);
            var endbit = middlebit.splitText(matchResult[0].length);  // matchResult[0] is the last matching characters.
            var middleclone = middlebit.cloneNode(true);
            spannode.appendChild(middleclone);
            middlebit.parentNode.replaceChild(spannode, middlebit);
            skip = 1;
        }
    }
    else if (node.nodeType == 1 && node.childNodes && !/(script|style)/i.test(node.tagName)) {
        for (var i = 0; i < node.childNodes.length; ++i) {
            i += innerHighlight(node.childNodes[i], pat);
        }
    }
    return skip;
 }

ここでやろうとしていることは、既存のロジックを維持することですが、作成した正規表現を使用して文字列の検索と分割を行います。toUpper 呼び出しはもう行っていないことに注意してください。代わりに、正規表現の大文字と小文字を区別しないようにしました。前述のように、私はこれをまったくテストしていませんが、実用的なソリューションにかなり近いはずです。とにかく始めるには十分です。

これは隠しフィールドを取得しないことに注意してください。それらが何のために必要なのかはわかりませんが、これは（正しい場合）文字列の強調表示を処理します。

于 2013-11-01T20:46:53.857 に答える