javascript - Greasemonkey 脚本可以对仅由 HTML 注释分割的页面部分进行重新排序？

Question

我一直在尝试更改此代码中元素的顺序，因此帐户信息、统计信息和网站流量分隔符(按顺序)列在跳转搜索分隔符之前。

目标页面 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 面板上，没有 <!-- New Stats Start --> comment——一个明显的错误；所有其他评论边界都是正确的，包括过多的垃圾和广告部分。

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

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

就在之前

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

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