警告：

Question

我一直在尝试更改此代码中元素的顺序，以便 帐户信息 ， 统计信息 并且 网站流量 分隔符（按此顺序）列在 jump-search 分隔符之前。

目标网页HTML看起来像这样（页面是HostGator控制面板）：

<div id="sub">
<!-- Jump Search Start -->
    <div id="jump-search">
       <h3 style="margin:0">Find</h3>
    </div>
<!-- Jump Search End -->

<!-- Website Traffic Start -->
    <div class="minititle">Website Traffic</div>
       <div class="trafficcontain"></div>
       <div style="height:10px;"></div>
<!-- Website Traffic End -->

<!-- New Stats Start -->
    <div class="minititle truncate-table" id="statsnew">Statistics</div>
       <div id="statscontain"></div>
    <div style="height:10px;"></div>
<!-- New Stats End -->

<!-- Account Info Start -->
    <div class="minititle">Account Information</div>
       <div class="accntcontain"></div>
       <div style="height:10px;"></div>
<!-- Account Info End -->
</div>

经过一个多小时摆弄Greasemonkey后，我没有什么可以表现出来的。非常感谢任何帮助。

Answer 1

这很棘手，因为这些部分是通过注释标记出来的，而不是任何值得信赖的HTML结构（除了.minititle div的内容之外）。
从好的方面来说，我的一些主机控制面板有同样的问题，所以我已经有了类似下面的脚本。 ;）

我们需要搜索注释字符串，然后搜索匹配注释之间的所有节点。唉，jQuery不能很好地处理HTML注释，但直接的DOM方法并不太难（可能不适用于所有浏览器。以下代码仅在Firefox和Chrome上测试过。）。

这是完整的用户脚本，可以在静态页面上使用。您还可以see the code in action at jsFiddle：

// ==UserScript==
// @name    Hostgator control panel, prioritize status panel order
// @match   https://*.hostgator.com/frontend/*
// @match   https://*.hostgator.com:2083/*
// @match   http://*.hostgator.com:2082/*
// @grant   GM_addStyle
// ==/UserScript==

//-- IMPORTANT!  Add your ports, in the match statements above, as needed.

var contNode    = document.querySelector ("#sub");
var insPoint    = findHtmlCommentsByRegex (contNode, /Jump Search Start/i);
if (insPoint && insPoint.length) {
  insPoint      = insPoint[0];

  moveCommentBoundedNodesBefore (insPoint, contNode, "Account Info");
  moveCommentBoundedNodesBefore (insPoint, contNode, "New Stats");
  moveCommentBoundedNodesBefore (insPoint, contNode, "Website Traffic");
}
else {
  reportError ('"Jump Search Start" comment not found!');
}

function moveCommentBoundedNodesBefore (targetNode, contNode, idingString) {
  var srchRegEx   = new RegExp (idingString + ' (?:Start|End)', 'i');
  var nodesToMove = getNodesBoundedByStartEndComments (contNode, srchRegEx);
  var pNode       = targetNode.parentNode;

  for (var J = 0, L = nodesToMove.length;  J < L;  ++J) {
    pNode.insertBefore (nodesToMove[J], targetNode);
  }
}

function getNodesBoundedByStartEndComments (contNode, srchRegex) {
  var boundedNodes  = [];
  var borders       = findHtmlCommentsByRegex (
    contNode, srchRegex, false //-- This MUST be false.
  );
  if (borders  &&  borders.length === 2) {
    var bNode       = borders[0];
    do {
      boundedNodes.push (bNode);
      if (bNode == borders[1]) {
        break;
      }
      bNode         = bNode.nextSibling;

    } while (bNode);
  }
  else {
    reportError ("Error finding comment pairs with: " + srchRegex);
    console.log ("borders: ", borders);
  }

  return boundedNodes;
}

function findHtmlCommentsByRegex (contNode, srchRegex, recurse) {
  var recurse       = recurse || false;
  var matchingComments  = [];

  if (contNode) {
    var chldNodes   = contNode.childNodes;

    for (var J = 0, L = chldNodes.length;  J < L;  ++J) {
      var cNode     = chldNodes[J];

      if (cNode.nodeType === Node.COMMENT_NODE) {
        if (srchRegex.test (cNode.nodeValue) ) {
          matchingComments.push (cNode);
        }
      }
      else if (recurse  &&  cNode.nodeType === Node.ELEMENT_NODE) {
        var subFind = findHtmlCommentsByRegex (cNode, srchRegex, recurse);
        if (subFind.length) {
          matchingComments.push (subFind);
        }
      }
    }
  }

  return matchingComments;
}

function reportError (mess) {
  //alert ("Problem found by GM script: " + mess);
  console.log ("Problem found by GM script: " + mess);
}

警告：

由于您表示这是针对HostGator控制面板的，请注意我的HG面板上没有评论 - 这是一个明显的错误;所有其他评论界限都是正确的，包括过多的垃圾和广告部分。

如果您也是这种情况，请添加以下代码：

var fubarDiv        = document.getElementById ("statsnew");
var fixitComment    = document.createComment ("New Stats Start");
fubarDiv.parentNode.insertBefore (fixitComment, fubarDiv);

之前的

moveCommentBoundedNodesBefore (insPoint, contNode, "New Stats");

线。
当我这样做时，脚本在我的HostGator面板上完美运行。

Greasemonkey脚本重新排序仅由HTML注释拆分的页面部分？

1 个答案:

警告：