使用Javascript Bookmarklet按标题将页面内容分块

我有一个HTML页面，它是从一个数据库中动态编译而来的，我需要对数据库进行重新设计和重组。我知道它看起来很凌乱，但我正在处理的是这个（注意：没有

或

标记）：

某个段落

标题1
某段

某段

标题2
某段

某段

标题3
某段

某段

...

我正在尝试编写一个javascript bookmarklet，该bookmarklet将重新格式化并将页面重新划分为已分类的

，以便我可以重新设置页面的样式。换句话说，我需要它以这样的方式结束：

<p>Some paragraph</p>
<div class="one">
 <h1>Heading 1</h1>
 <p>Some paragraph</p>
 <p>Some paragraph</p>
</div>

<div class="two">
 <h2>Heading 2</h2>
 <p>Some paragraph</p>
 <p>Some paragraph</p>
</div>

<div class="three">
 <h3>Heading 3</h3>
 <p>Some paragraph</p>
 <p>Some paragraph</p>
</div>

<div class="two">
 <h2>Heading 2</h2>
 <p>Some paragraph</p>
 <p>Some paragraph</p>
</div>

某个段落

标题1
某段

某段

标题2
某段

某段

标题3
某段

某段

标题2
某段

某段

---

请注意，我无法对现有页面执行任何操作；我必须通过bookmarklet或附加组件来完成。您可以从bookmarklet中插入jQuery，这样做相当简单：

function a() {
    var names = {'h1': 'one',
                 'h2': 'two',
                 'h3': 'three',
                 'h4': 'four',
                 'h5': 'five',
                 'h6': 'six'};
    var i = 1;
    jQuery('*').filter(":header").each(function() {
        jQuery(this)
        .add(jQuery(this)
            .nextUntil( jQuery("*")
                        .filter(":header")) )
            .wrapAll( jQuery("<div class='" + names[this.nodeName.toLowerCase()] + "'>") );
    });
};

(function(){
    var s=document.createElement('script');
    s.src='http://code.jquery.com/jquery-1.6.1.js';
    document.getElementsByTagName('head')[0].appendChild(s);
    s.onload = function(){
        setTimeout(a, 500);
    };
})();

函数a（）{
变量名称={'h1'：'one'，
‘h2’：‘2’，
‘h3’：‘三’，
"h4":"四",，
"h5":"五",，
‘h6’：‘6’}；
var i=1；
jQuery（'*'）.filter（“：header”）.each（function（）{
jQuery（这个）
.add（jQuery（this）
.nextUntil（jQuery（“*”）
.filter（“：header”））
.wrapAll（jQuery（“”）；
});
};
（功能（）{
var s=document.createElement（'script'）；
s、 src='1〕http://code.jquery.com/jquery-1.6.1.js';
document.getElementsByTagName（'head'）[0]。appendChild；
s、 onload=函数（）{
设置超时（a，500）；
};
})();

或者，在一行中：

javascript:function a(){var b={h1:"one",h2:"two",h3:"three",h4:"four",h5:"five",h6:"six"};jQuery("*").filter(":header").each(function(){jQuery(this).add(jQuery(this).nextUntil(jQuery("*").filter(":header"))).wrapAll(jQuery("<div class='"+b[this.nodeName.toLowerCase()]+"'>"))})}(function(){var b=document.createElement("script");b.src="http://code.jquery.com/jquery-1.6.1.js";document.getElementsByTagName("head")[0].appendChild(b);b.onload=function(){setTimeout(a,500)}})();

javascript:function a（）{var b={h1:“一”，h2:“二”，h3:“三”，h4:“四”，h5:“五”，h6:“六”}；jQuery（“*”）.filter（“：header”）.each（function（）{jQuery（this）.add（jQuery（this）.nextUntil（jQuery（“*”）.filter（“：header））}（function（）{var b=document.createElement（“）；b.src=”http://code.jquery.com/jquery-1.6.1.js"；document.getElementsByTagName（“head”）[0].appendChild（b）；b.onload=function（）{setTimeout（a，500）}}（）；

您不需要jquery。只需遍历childNode伪数组（可能是body的数组……即使未在html中指定，也应创建body元素），并构建元素的输出数组。当您点击h1/h2/h3时，您将创建一个div，将其添加到数组的末尾，并将其保存为“当前元素”，其他元素将添加到其中。完成后，您可以将这些元素添加到主体中（或将它们放在其他地方）

var parent=document.body，i；
//复制到临时数组中，否则您将
//大小随元素变化的数组（子节点）
//离开它
var tmpArray=[]；
对于（i=0；i“请注意，我无法对现有页面执行任何操作”-这到底是什么意思？如果你需要更改DOM，你将以某种方式更改页面。我的意思是，我不能在服务器端执行任何操作。所有操作都必须通过bookmarklet在客户端完成。谢谢。这几乎有效，但我需要类名来匹配标题级别。每次成功，只会将类增加1essive div。这有意义吗？@damenleeturks:对不起，我不太明白类名来自何处。我希望它现在已经修复。太棒了！谢谢，它工作得很好。接着是一个。抱歉，这是在将每个节点包装在自己的div中，这对我不起作用。我看到你有一个适合你的解决方案，但我对此感到惊讶e也不起作用。我对它进行了测试，它与您的示例一样……它只将每个H1/H2/H3元素包装在一个div中，然后将所有后续元素添加到创建的最后一个div中。在第一个H1/H2/H3之前的所有元素都添加到父元素中。（这更“手动”）（与jquery解决方案相比，我更喜欢这种方式，因为在我看来，它更容易遵循实际操作。）这实际上效果很好。谢谢。你知道如何把所有的
class=3
div
放在前一个
class=2
div
的内部和链的上游，这样只有
class=1
div
处于顶层吗？
javascript:function a(){var b={h1:"one",h2:"two",h3:"three",h4:"four",h5:"five",h6:"six"};jQuery("*").filter(":header").each(function(){jQuery(this).add(jQuery(this).nextUntil(jQuery("*").filter(":header"))).wrapAll(jQuery("<div class='"+b[this.nodeName.toLowerCase()]+"'>"))})}(function(){var b=document.createElement("script");b.src="http://code.jquery.com/jquery-1.6.1.js";document.getElementsByTagName("head")[0].appendChild(b);b.onload=function(){setTimeout(a,500)}})();

var parent = document.body, i;
// copy into temp array, since otherwise you'll be walking
// an array (childnodes) whose size is changing as elements 
// get removed from it
var tmpArray = [];
for (i=0; i<parent.childNodes.length; i++)
 tmpArray.push(parent.childNodes[i]);

var tagToClassMap = {H1: "one", H2: "two", H3: "three"};
var newArray = [], currElem = null;
for (i=0; i<tmpArray.length; i++) {
  var elem = tmpArray[i];
  var className = null;
  if (elem.tagName && (className = tagToClassMap[elem.tagName]) != null) { 
    currElem = document.createElement("div");
    currElem.className = className;
    newArray.push(currElem);
    currElem.appendChild (elem);
    }
  else  {
    if (currElem)
      currElem.appendChild (elem);
    else 
      newArray.push(elem);
    } 
  }

parent.innerHTML = '';
for (i=0; i<newArray.length; i++) {
 parent.appendChild (newArray[i]);
 }