Question

我正在尝试在两个评论标记之间获取内容：

HTML：

<!--googleon:all-->
<div>return this</div>
<!--googleoff:all-->
<div>not important</div>
<!--googleon:all-->
<div>and this</div>
<!--googleoff:all-->
<div>ignore</div>
<!--googleon:all-->
<div>and this</div>

JS：

$.fn.getComments = function () {
    return this.contents().map(function () {
        if (this.nodeType === 8 && this.nodeValue.match("googleon:all")) return this.nodeValue;
    }).get();
}

var comments = $('body').getComments();

然而，它返回所有内容，而不是与评论值匹配。我期待着：

return this
and this
and this

jsfiddle

Answer 1

你不能使用map，你必须记住自己是处于“开启”还是“关闭”部分。大致是：

$.fn.getComments = function () {
    // Remember whether we're gathering or not
    var gathering = false;
    // Gather into this array
    var elements = [];
    // Look through contents
    this.contents().each(function () {
        switch (this.nodeType) {
            case 8:
                // Comment, does it change our gathering flag?
                if (this.nodeValue.includes("googleon:all")) {
                    gathering = true;
                } else if (this.nodeValue.includes("googleoff:all")) {
                    gathering = false;
                }
                break;
            case 1: // Element
            // Add case 3: if you want text nodes too
                // Push it if we're gathering
                if (gathering) {
                    elements.push(this.innerHTML);
                }
                break;
        }
    })
    return elements;
};

console.log($(document.body).getComments());

.as-console-wrapper {
  max-height: 100% !important;
}

<!--googleon:all-->
<div>return this</div>
<!--googleoff:all-->
<div>not important</div>
<!--googleon:all-->
<div>and this</div>
<!--googleoff:all-->
<div>ignore</div>
<!--googleon:all-->
<div>and this</div>
<!--googleoff:all-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

你可能需要调整一下（例如，你可能需要一个数组数组，其中开/关标记之间的每个区域都有一个条目，其中的条目是该区域中所有节点的数组），但是它应该让你走正确的路。

Answer 2

使用jQuery，你可以做到

＆＃13;

$("body").contents().filter(function() {
  return this.nodeType == 8;
}).each(function(idx, elem) {
  if (elem.nodeValue == 'googleon:all') {
    console.log($(this).next().html())
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--googleon:all-->
<div>return this</div>
<!--googleoff:all-->
<div>not important</div>
<!--googleon:all-->
<div>and this</div>
<!--googleoff:all-->
<div>ignore</div>
<!--googleon:all-->
<div>and this</div>

＆＃13;

使用jQuery从DOM获取内容

2 个答案: