0

次のページが含まれているとします。

<div data-search="type1">
any html
<!-- that is, .click is a child of any level -->
<span class="click" data-source="page1.html">blue</span>
<!-- let's call it "click1" -->
<span class="click" data-source="page1.html">  blue <span class="variable">thing</span>  </span>
<!-- let's call it "click2" -->
<span class="click" data-source="page1.html"> blue<span class="variable">bell</span></span>
<!-- let's call it "click3" -->
any html
</div>
<div id="content"></div>

page1.html：

<div class="container">
any html
<span data-search="type1">blue</span>
any html
</div>
<div class="container">
any html
<span data-search="type1">blue <span class="variable">flower</span></span>
any html
</div>
<div class="container">
any html
<span data-search="type1">  blue    <span class="variable">shirt</span></span>
any html
</div>
<div class="container">
any html
<span data-search="type1">non-matching html</span>
<!-- no match inside, skip this .container -->
any html
</div>
<div class="container">
any html
<span data-search="type2">blue</span>
<!-- "data-search" attribute doesn't match a "data-search" attribute of the first "data-search"-attribute-containing element that we encounter when we traverse from .click up the DOM, so skip this .container -->
any html
</div>
<div class="container">
any html
<span data-search="type1">blue<span class="variable">berry</span></span>
<!-- no space after "blue", so "berry" is a part of the word -->
any html
</div>

「.click」要素をクリックした後、メソッドを使用したいと思います$.get。
「click1」要素の場合、＃contentを

<div id="content">
<div class="container">
any html
<span data-search="type1">blue</span>
any html
</div>
</div>

「click2」要素の場合、＃contentを

<div id="content">
<div class="container">
any html
<span data-search="type1">blue <span class="variable">flower</span></span>
any html
</div>
<div class="container">
any html
<span data-search="type1">  blue    <span class="variable">shirt</span></span>
any html
</div>
</div>

「click3」要素の場合、＃contentを

<div id="content">
<div class="container">
any html
<span data-search="type1">blue<span class="variable">berry</span></span>
<!-- no space after "blue", so "berry" is a part of the word -->
any html
</div>
</div>

トリッキーかどうかはわかりませんが、そのようなスクリプトスキルはなく、とても興味深いので、助けてくれるか、アイデアが悪い理由を教えてください。

編集：私の質問の前のバージョンが間違っていたので、私はそれを改訂しました。
私が試したことを示すことになっている場合、私は今どこにいるのかを示すことができます。このスクリプトは機能しません。（正規表現を単純化し、.variable要素全体を削除しています）

<script>
    $(document).ready(function () {
        $('.click').click(function () {
            $("#content").empty();
            var search = $(this).html().replace(/<span class=\"variable\">(.*?)<\/span>/i, "");
            var type = $(this).parents('[data-search]').first().attr('data-search');
            var page = $(this).attr('data-source');
            $.get(page, {}, function (data) {
                var $response = $('<div />').html(data);
                var $content = $response.find('.container').filter(function (index) {
                    return $(this).contents().filter(function (index) {
                        return $(this).attr('data-search') == type && $(this).html().replace(/<span class=\"variable\">(.*?)<\/span>/i, "") == search;
                    }).length > 0;
                });
                $('#content').append($content);
            }, 'html');
        });
    });
</script>

しかし、クリックして表示される<span class="click" data-source="page1.html">blue</span>ことを期待<div class="container">any html<span data-search="type1">blue</span>any html</div>しても、何も起こりません。問題は、このフィルターに一致する要素が少なくとも1つあるすべてのコンテナーを返す方法がわからないことです$(this).attr('data-search') == type && $(this).html().replace(/<span class=\"variable\">(.*?)<\/span>/i, "") == search。

そして、正規表現の論理を明確にする必要があります。
1.要素全体.variableが1つの特別な記号（たとえば、アスタリスク）に置き換えられます。
2.非スペース文字間の空白、タブ、および改行は、1つのスペース文字に置き換えられます。3. /要素
の最初と最後の空白、タブ、改行が削除されます。.click[data-search]

たとえば、この構造の.click/[data-search]要素：

<span>   match<span class="variable">variable1</span>    <span class="variable">variable2</span> match</span>

になります

<span>match* * match</span>
4

1 に答える 1

0

3 つのポイントに一致する正規表現のセットを次に示します。

// Remove .variable element
input = input.replace(/<span\s+class\s*=\s*"variable">.+?<\/span>/img, '*');

// Replace whitespaces, tabs and linebreaks between the non-space characters with one space char
input = input.replace(/\s+/g, ' ');

// Remove whitespaces, tabs and linebreaks in the beginning and in the end
input = input.replace(/^\s*<span>\s*/m, "<span>");
input = input.replace(/\s*<\/span>\s*$/m, "</span>");

デモ http://jsfiddle.net/NuBre/

于 2012-10-26T08:47:08.457 に答える