1

拒否とその仕組みを理解するのが難しいのですが、ウェブサイトの基本的な辞書/用語集を作成しようとしていますが、すでに多くの時間を費やしています。

そこに私のコード：

// MY MULTIPLE ARRAY
var myDictionnary = new Object();
myDictionnary.myDefinition = new Array();

myDictionnary.myDefinition.push({'term':"*1", 'definition':"My description here"});
myDictionnary.myDefinition.push({'term':"word", 'definition':"My description here"});
myDictionnary.myDefinition.push({'term':"my dog doesn't move", 'definition':"My description here"});

// MY FUNCTION
$.each(myDictionnary.myDefinition, function(){
    var myContent = $('#content_right').html();
    var myTerm = this.term;
    var myRegTerm = new RegExp(myTerm,'g');

    $('#content_right').html(myContent.replace(myRegTerm,'<span class="tooltip" title="'+this.definition+'"> *'+this.term+'</span>'));
});

配列を作成し、結果ごとに div#content_right で同じコンテンツを検索し、タイトルとツールチップを含むスパンに置き換えます。以前に試したことと混同しないように、正規表現を空にしました。

私の配列「用語」では、私が調査するテキストの種類を確認できます。「単語」などの通常のテキストを検索する場合に機能します。

しかし、「asterix」のような正規表現についてはバグです。それを過去にする方法を見つけたとき、彼はそれをテキストに追加します。「asterix」を通常の文字のように解釈する方法をいろいろ試しましたが、うまくいきません。

そこに私が欲しいもの：私の変数「myTerm」内のテキストが何であれ、変数を文字通り解釈します。これは可能ですか？そうでない場合、どのような解決策を使用する必要がありますか。

前もって感謝します、PS私の下手な英語で申し訳ありません...（私はフランス人です）アレックス

4

2 に答える 2

1

*正規表現の特殊文字で、「前の文字が 0 個以上」を意味します。これは最初の文字であるため、無効であり、エラーが発生します。

そのような特殊文字をエスケープし、正規表現で使用できるようにするためにpreg_quotePHPJSから実装することを検討してください。

ただし、これを行う方法は非常に悪いです。何度も使っているからだけでなく、innerHTMLこんなことに出くわしたら？

Blah blah blah <img src="blah/word/blah.png" />

結果の出力は次のようになります。

Blah blah blah <img src="blah/<span class="tooltip" title="My description here"> *word</span>/blah.png" />

あなたが試みていることを行う唯一の実際の方法は、テキストノードを具体的にスキャンし、テキストノードで使用.splitText()して一致する単語を抽出し、それを独自の<span>タグに入れることです。

上記の説明の実装例を次に示します。

function definitions(rootnode) {
    if( !rootnode) rootnode = document.body;
    var dictionary = [
        {"term":"*1", "definition":"My description here"},
        {"term":"word", "definition":"My description here"},
        {"term":"my dog doesn't move", "definition":"My description here"}
    ], dl = dictionary.length, recurse = function(node) {
        var c = node.childNodes, cl = c.length, i, j, s, io;
        for( i=0; i<cl; i++) {
            if( c[i].nodeType == 1) { // ELEMENT NODE
                if( c[i].className.match(/\btooltip\b/)) continue;
                // ^ Exclude elements that are already tooltips
                recurse(c[i]);
                continue;
            }
            if( c[i].nodeType == 3) { // TEXT NODE
                for( j=0; j<dl; j++) {
                    if( (io = c[i].nodeValue.indexOf(dictionary[j].term)) > -1) {
                        c[i].splitText(io+dictionary[j].term.length);
                        c[i].splitText(io);
                        cl += 2; // we created two new nodes
                        i++; // go to next sibling, the matched word
                        s = document.createElement('span');
                        s.className = "tooltip";
                        s.title = dictionary[j].definition;
                        node.insertBefore(s,c[i]);
                        i++;
                        s.appendChild(c[i]); // place the text node inside the span
                        // Note that now when i++ it will point to the tail,
                        // so multiple matches in the same node are possible.
                    }
                }
            }
        }
    };
    recurse(rootnode);
}

これで、ドキュメント内のすべての一致を置き換えるために呼び出したり、特定のコンテナー内の一致のみを置き換えdefinitions()たりすることができます。definitions(document.getElementById("myelement"))

于 2013-02-28T18:04:27.103 に答える
0

別の変数を追加すると、問題が解決します。

            for( j=0; j<dl; j++) {
                  debutI =i;
                  if((io =c[i].nodeValue.indexOf(dictionary[j].term)) != -1) {
                        c[i].splitText(io+dictionary[j].term.length);
                        c[i].splitText(io);
                        cl += 2; // we created two new nodes
                        i++; // go to next sibling, the matched word
                        s = document.createElement('span');
                        s.className = "tooltip";
                        s.title = dictionary[j].definition;
                        node.insertBefore(s,c[i]);
                        i++;
                        s.appendChild(c[i]); // place the text node inside the span
                        // Note that now when i++ it will point to the tail,
                        // so multiple matches in the same node are possible.
                    }
                    i = debutI;
                }

Comme ça, on n'aura pas à mettre tous les spans partout dans le site à la main. > _ >

于 2013-05-23T01:29:35.680 に答える