Question

假设我们有一个包含以下内容的页面：

<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>

Answer 1

以下是一组与您的三点匹配的正则表达式：

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

如果元素包含一些自定义过滤的文本，如何调用该元素？

1 个答案: