Flat Element based on a tag

with the ability to set the allowed nest level for that tag

by lid0

HTML

<div>Original</div>
<kbd>d so<kbd>m</kbd>et<kbd><kbd>hi</kbd></kbd>ng<kbd> </kbd>t<kbd>o a<kbd>b<kbd>u<kbd>s<kbd>e</kbd> <kbd>n</kbd>ow</kbd> w</kbd>e w<kbd>e</kbd>re <kbd><kbd><kbd><b>robbed</b></kbd></kbd> <kbd>o</kbd>f</kbd> </kbd></kbd></kbd>
<hr>
<div>Max Nest level : 0</div>
<kbd id="test-0">d so<kbd>m</kbd>et<kbd><kbd>hi</kbd></kbd>ng<kbd> </kbd>t<kbd>o a<kbd>b<kbd>u<kbd>s<kbd>e</kbd> <kbd>n</kbd>ow</kbd> w</kbd>e w<kbd>e</kbd>re <kbd><kbd><kbd><b>robbed</b></kbd></kbd> <kbd>o</kbd>f</kbd> </kbd></kbd></kbd>
    
<hr>
    <div>Max Nest level : 1</div>
<kbd id="test-1">d so<kbd>m</kbd>et<kbd><kbd>hi</kbd></kbd>ng<kbd> </kbd>t<kbd>o a<kbd>b<kbd>u<kbd>s<kbd>e</kbd> <kbd>n</kbd>ow</kbd> w</kbd>e w<kbd>e</kbd>re <kbd><kbd><kbd><b>robbed</b></kbd></kbd> <kbd>o</kbd>f</kbd> </kbd></kbd></kbd>
    
<hr>
    <div>Max Nest level : 2</div>
    <kbd id="test-2">d so<kbd>m</kbd>et<kbd><kbd>hi</kbd></kbd>ng<kbd> </kbd>t<kbd>o a<kbd>b<kbd>u<kbd>s<kbd>e</kbd> <kbd>n</kbd>ow</kbd> w</kbd>e w<kbd>e</kbd>re <kbd><kbd><kbd><b>robbed</b></kbd></kbd> <kbd>o</kbd>f</kbd> </kbd></kbd></kbd>

CSS

kbd {
background-color: #fff;
border: 1px solid #e9e9e9;
border-radius: 3px;
box-shadow: 0 1px 0 rgba(0,0,0,0.8);
color: #222;
display: inline-block;
font-size: 12px;
line-height: 1.4;
margin: 0 .1em;
padding: .1em .6em;
}

div{
    margin:5px;
    background-color:#cece99;
}

b{
    color:red;
}

JavaScript

/**
Find a particular <tag> nestness levels in a given element.
return an array where each item is group of elements based on thier depth(nest level) 

@arguments
tag String Tag name to search
$el Jquery Element to be examined
depth Initialize with 0 on first call used to control recusion level and track nest level
**/
function find_deepest(tag,$el,depth){
    if (typeof depth === "undefined" ){ depth =0}
    if (depth > 100){
        console.log("reached max recursion depth");
        return null;
    }
    var chl = $el.children(tag);
    
    if (chl.length > 0){
        deep_list[depth] = chl;
        find_deepest(tag, $el.children(tag),depth+1);
    }     
}

/**
flat elements based on the maximum nest level allowed.

@arguments
depth_group_list Array Generated by find_deepest()
max_level Int The maximum level allowed

**/
function flat_tags(depth_group_list,max_level){
    range_from = Math.min(max_level,depth_group_list.length-1);
    range_to = depth_group_list.length-1;
    //console.log(range_from, range_to);    
    for (i=range_to; i>=range_from; i--){  //loop from bottom to top
        $cur_elms = depth_group_list[i];
        $cur_elms.each (function (a,b){
            $cur_el = $(b);
            $cur_el.replaceWith($cur_el.html());
        });
    }
    
}

//Todo: make find_deepest return the list instead of using a global scoped variable

var deep_list = [];
find_deepest("kbd",$("#test-0"));
flat_tags(deep_list,0);

deep_list = [];
find_deepest("kbd",$("#test-1"));
flat_tags(deep_list,1);


deep_list = [];
find_deepest("kbd",$("#test-2"));
flat_tags(deep_list,2);