选择html-element的前缀和后缀标签

Question

我要解决的问题是选择选定 html 元素的某个前缀和后缀。一个小例子应该描述我正在尝试做的事情。假设我们有以下 html 源代码：

<div class="box1">
  <div class="tutlogo">
    <a class="box" href="sql/default.asp" target="_top">
      <div class="image" style="background-color:#FF9900;"></div>
      <h1>SQL</h1>
    </a>
  </div>
</div>
<div class="tutbuttons">    
  <a class="btn" href="sql/default.asp" target="_top">SQL Tutorial</a>
  <a class="btn" href="sql/sql_quickref.asp" target="_top">SQL Reference</a>
</div>
<div class="box1">
  <div class="tutlogo">
    <a class="box" href="php/default.asp" target="_top">
      <div class="image" style="background-color:#41BC81;"></div>
      <h1>PHP</h1>
    </a>
  </div>
  <div class="tutbuttons">
    <a class="btn" href="php/default.asp" target="_top">PHP Tutorial</a>
    <a class="btn" href="php/php_ref_array.asp" target="_top">PHP Reference</a>
  </div>
</div>          

假设我选择了<h1>PHP</h1> 元素。我试图提取作为该元素的“前缀”的是<h1> 标记之前的n html 标记。鉴于n 是5，那么我要提取的前缀是序列：</div><div><a><div><div>。我想分别提取<h1>PHP</h1>元素后面的5个html标签作为后缀。在这个例子中，这将是：</a></div><div><a></a>。

我尝试使用 jquery 的 tree traversal 方法来完成工作，但是这样我无法获得结束的 html 标记。我也用谷歌搜索了一个解决方案，但找不到任何适合我需要的东西。也许有人已经这样做了，可以告诉我如何提取前缀、后缀标签，或者可以为我指明正确的方向。也许它真的很琐碎，我只是想得太复杂了。

无论如何感谢您的帮助。

Answer 1

我不认为这是微不足道的，这应该会让你对以前的努力感到满意。

你可能需要一些树遍历，不管你最终是怎么做的。前几天我正在构建一个自动工具提示创建插件，所以我想到了这种东西。

这是我一起破解的 - http://jsfiddle.net/naazkc1v/

这不是一个最终的解决方案，但它可以按原样运行，并且可能会满足您的需求。

1. 定义要抓取var initialEl = $("h1")[0]周围标签的元素
2. 它向上导航文档树，如果遇到 $('body')、$('html') 或 $(document) 则停止
3. 它采用该根元素并递归删除 html 标记上的所有属性并清空文本节点
4. 它会在新的精简 HTML 中找到原始元素的 HTML，并返回它之前和之后的字符串。

示例

有了这个 HTML

<div class="box1">
  <div class="tutlogo">
    <a class="box" href="php/default.asp" target="_top">
      <div class="image" style="background-color:#41BC81;"></div>
      <h1>PHP</h1>
    </a>
  </div>
  <div class="tutbuttons">
    <a class="btn" href="php/default.asp" target="_top">PHP Tutorial</a>
    <a class="btn" href="php/php_ref_array.asp" target="_top">PHP Reference</a>
  </div>
</div>    

最后的3个控制台日志将是

<div><a><div></div>
<h1>PHP</h1>
</a></div><div><a></a><a></a></div>

与您想要的解决方案相比的问题：

目前不保证目标前后都有n标签。编写解析器以去除额外的标签应该很容易。但是，如果根父节点不包含足够多的标签，则需要抓取我们发现的根节点的兄弟节点，在该兄弟节点上运行整个函数，然后从其返回值中解析出必要的标签。

资源

• Remove all attributes
• Remove text with jQuery

完整的 Javascript

$(function(){

    jQuery.fn.removeAttributes = function() {
      return this.each(function() {
        if (this.attributes){
            var attributes = $.map(this.attributes, function(item) {
              return item.name;
            });
            var img = $(this);
            $.each(attributes, function(i, item) {
              img.removeAttr(item);
            });
        }
      });
    }

    var initialEl = $("h1")[0],
        html = $("html")[0],
        body = $("body")[0],
        el = initialEl;

    function nodeInBody(node){
        return node.parentNode &&
               node.parentNode != document &&
               node.parentNode != html &&
               node.parentNode != body;
    }

    while ( nodeInBody(el) ){
        el = el.parentNode;
    }

    var $el = $(el),
        //This assumes there's only ONE text node within the original element
        //If you have any other elements inside the element you're targetting,
        //this will fail
        $initialTextNode = $(initialEl).contents()[0];

    function removeAttributesFromChildren(el){
        $(el).contents().each(function(i,el){
            // Emptying Text Nodes if they're not our saved one
            if ( el.nodeType == 3 && el !== $initialTextNode) el.nodeValue = "";
            //Call the jQuery plugin we defined earlier
            $(el).removeAttributes();
            // Call this function on the element
            removeAttributesFromChildren(el);
        });
    }

    removeAttributesFromChildren(el);

    var html = $(el).html(),
        initialElHTML = initialEl.outerHTML;

    var start = html.indexOf(initialElHTML);

    // If our original item's HTML is contained in the html string
    if ( start > -1 ){
        // Grab the strings before and after it
        var end = start+initialElHTML.length,
            before = html.substring(0,start),
            word = html.substring(start,end),
            after = html.substring(end);

            console.log(before);
            console.log(word);
            console.log(after);

    }

});