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>出现，也不会发生任何事情。问题是我不知道如何返回所有包含至少一个与此过滤器匹配的元素的容器：$(this).attr('data-search') == type && $(this).html().replace(/<span class=\"variable\">(.*?)<\/span>/i, "") == search.

我应该澄清正则表达式的逻辑。
1. 整个.variable元素被替换为一个特殊符号（比如星号）；
2. 非空格字符之间的空格、制表符和换行符被替换为一个空格字符；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

这是一组将匹配您的三点的正则表达式：

// 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 回答