Javascript 选择html元素的前缀和后缀标记

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

假设我选择了

PHP

元素。我试图提取的这个元素的“前缀”是

标记前面的

n

html标记。假设

n

是5，那么我想要提取的前缀是序列：

jquery的方法来完成任务，但这样我就无法获得结束的html标记。我也在谷歌上搜索解决方案，但找不到任何适合我需要的。也许有人已经这样做了，可以告诉我如何提取前缀、后缀标记，或者可以为我指出正确的方向。也许这真的很琐碎，我只是想得太复杂了

无论如何，谢谢你的帮助。
我认为这不是小事，这应该会让你对以前的努力感到高兴

您可能需要进行一些树遍历，不管最终如何进行。前几天我正在构建一个自动工具提示创建插件，所以我就想到了这种东西

这是我拼凑的东西-

这不是一个最终的解决方案，但它按原样工作，可能会让你得到你需要的

定义要获取标签的元素
var initialEl=$（“h1”）[0]
它在文档树中向上导航，遇到$（'body'）、$（'html'）或$（document）时停止
它接受该根元素，递归地删除html标记上的所有属性，并清空文本节点
它在新的精简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>    

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

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

    }

});