0

ブラウザスタイルのページ検索を実行するjqueryプラグインを作成しています。検索を改善する必要がありますが、まだhtmlの解析には取り掛かりたくありません。

現時点での私のアプローチは、DOM要素全体とネストされたすべての要素を取得し、特定の用語に対して正規表現の検索/置換を実行することです。置換では、一致した用語の周りにスパンをラップし、そのスパンをアンカーとして使用して、強調表示やスクロールなどを行います。htmlタグ内の文字が一致しないことが重要です。

これは私が得たのと同じくらい近いです：

(?<=^|>)([^><].*?)(?=<|$)

htmlタグに含まれていないすべての文字をキャプチャするのは非常にうまくいきますが、検索語を挿入する方法を理解するのに苦労しています。

Input: Any html element (this could be quite large, eg <body>)    
Search Term: 1 or more characters    
Replace Txt: <span class='highlight'>$1</span>

アップデート

次の正規表現は、http： //gskinner.com/RegExr/でテストしているときに必要なことを実行します...

Regex: (?<=^|>)(.*?)(SEARCH_STRING)(?=.*?<|$)
Replacement: $1<span class='highlight'>$2</span>

ただし、JavaScriptで使用するのに問題があります。次のコードで、chromeは「無効な正規表現：/（？<= ^ |>）（。？）（Mary）（？=。？<| $）/：無効なグループ」というエラーを表示します。

var origText = $('#'+opt.targetElements).data('origText');
var regx = new RegExp("(?<=^|>)(.*?)(" + $this.val() + ")(?=.*?<|$)", 'gi');
$('#'+opt.targetElements).each(function() {
   var text = origText.replace(regx, '$1<span class="' + opt.resultClass + '">$2</span>');
   $(this).html(text);
});

それはグループを壊しています（？<= ^ |>）-これは不器用なものですか、それとも正規表現エンジンの違いですか？

アップデート

この正規表現がそのグループで壊れている理由は、Javascriptが正規表現のルックビハインドをサポートしていないためです。参照と可能な解決策については、http：//blog.stevenlevithan.com/archives/mimic-lookbehind-javascriptを参照してください。

4

1 に答える 1

0

jQuerysの組み込みtext()メソッドを使用するだけです。選択したDOM要素のすべての文字を返します。

DOMアプローチ（インターフェースのドキュメントNode）の場合：要素のすべての子ノードに対して実行します。子が要素ノードの場合は、再帰的に実行します。テキストノードの場合は、テキスト（node.data）を検索し、何かを強調表示/変更する場合は、ノードのテキストを見つかった位置まで短くし、一致したテキストと残りのテキストノードを含むハイライトスパンを挿入しますテキストの。

サンプルコード（調整済み、原点はここにあります）：

(function iterate_node(node) {
    if (node.nodeType === 3) { // Node.TEXT_NODE
        var text = node.data,
            pos = text.search(/any regular expression/g), //indexOf also applicable
            length = 5; // or whatever you found
        if (pos > -1) {
            node.data = text.substr(0, pos); // split into a part before...
            var rest = document.createTextNode(text.substr(pos+length)); // a part after
            var highlight = document.createElement("span"); // and a part between
            highlight.className = "highlight";
            highlight.appendChild(document.createTextNode(text.substr(pos, length)));
            node.parentNode.insertBefore(rest, node.nextSibling); // insert after
            node.parentNode.insertBefore(highlight, node.nextSibling);
            iterate_node(rest); // maybe there are more matches
        }
    } else if (node.nodeType === 1) { // Node.ELEMENT_NODE
        for (var i = 0; i < node.childNodes.length; i++) {
            iterate_node(node.childNodes[i]); // run recursive on DOM
        }
    }
})(content); // any dom node

また、 highlight.jsもあります。これは、まさにあなたが望むものかもしれません。

于 2012-05-02T15:30:24.013 に答える