Use Javascript Bookmarklet to Chunk Page Content by Headings

问题

I've got an HTML page that is compiled dynamically from a database that I need to restyle and restructure. It looks messy, I know, but what I'm working with is this (note: no <head> or <body> tags):

<p>Some paragraph</p>
<h1>Heading 1</h1>
<p>Some paragraph</p>
<p>Some paragraph</p>
<h2>Heading 2</h2>
<p>Some paragraph</p>
<p>Some paragraph</p>
<h3>Heading 3</h3>
<p>Some paragraph</p>
<p>Some paragraph</p>
...

I'm trying to code a javascript bookmarklet that will reformat and redivide the page into classed <div>'s so that I can restyle it. In other words, I need it to end up like this:

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

Please note that I can't do anything to the existing page; I have to do it through a bookmarklet or add-on.

回答1:

You don't need jquery. Just walk the childNode pseudo-array (presumably of the body...a body element should be created even if not specified in the html), and build an output array of elements. When you hit a h1/h2/h3, you'll create a div, add it to the end of the array, as well as saving it as the "current element" which other elements will be added to. Once done, you can add those elements to the body (or put them somewhere else).

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]);
 }

回答2:

You could insert jQuery from the bookmarklet, and then it's rather easy:

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);
    };
})();

Or, in one line:

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)}})();

来源：https://stackoverflow.com/questions/6099536/use-javascript-bookmarklet-to-chunk-page-content-by-headings

标签

javascript

bookmarklet