Question

我有一个HTML页面，它是从我需要重新构建和重构的数据库动态编译的。我知道，它看起来很乱，但我正在使用的是这个（注意：没有<head>或<body>标签）：

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

我正在尝试编写一个javascript bookmarklet，它将重新格式化并将页面重新划分为分类<div>，以便我可以重新设置它。换句话说，我需要它像这样结束：

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

请注意，我对现有页面无能为力;我必须通过书签或附加组件来完成。

Answer 1

你可以从书签中插入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);
    };
})();

或者，在一行中：

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

Answer 2

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

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

按标题使用Javascript Bookmarklet到Chunk页面内容

2 个答案: