在jquery中获取span标记的前2个和后2个单词

Question

data-color="red"I want 2 words after and before span tags.
here is my html code:

<p>This pathway has an inner and an outer wall. The pressure <span data-color="red" class="highlight">inside the</span> eye closes the tunnel.</p>

I want output like this=>

The pressure <span data-color="red" class="highlight">inside the</span> eye closes

note: attributes in span tags changes

Answer 1

You could get the previous and next sibling of the .highlight element and slice the textNodes:

function get(el, dir) {
        var ps = el[dir === 'prev' ? 'previousSibling' : 'nextSibling'];
        if (!ps || ps.nodeType !== 3) return '';
        var arr = ps.nodeValue.trim().split(/\s+/g);
        return dir == 'prev' 
               ? arr.slice(-2).join(' ') 
               : arr.slice(0, 2).join(' ');
    }

$('p').has('.highlight').html(function () {
    var e = $('.highlight', this).get(0);
    return get(e, 'prev') + ' ' + e.outerHTML + ' ' + get(e, 'next');
});

http://jsfiddle.net/kzx6zhkg/

Answer 2

You can do this

var elem = $('p');
var html = elem.find('span')[0].outerHTML;
var result = elem.html().match(new RegExp("(\\w+\\s+){2}" + html + "(\\s+\\w+){2}"))[0];

DEMO