Get the full word containing a specific item

Question

Having a link to a specific DOM element (for example, <mark> ), how can we get the full word containing this element?

For example:

 H<mark>ell</mark>o Wor<mark>l</mark>d, and He<mark>llo</mark>, <mark>Pluto</mark>! 

I expect to get the following result:

• First <mark> : Hello
• Second: World
• Third: Hello
• Fourth: Pluto

 var $marks = $("mark"); var tests = [ "Hello", "World", "Hello", "Pluto", ]; function getFullWord($elm) { // TODO: How can I do this? // This is obviously wrong. return $elm.html(); } var $marks = $("mark"); tests.forEach(function(c, i) { var word = getFullWord($marks.eq(i)); if (word !== c) { alert("Wrong result for index " + i + ". Expected: '" + c + "' but got '" + word + "'"); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> H<mark>ell</mark>o Wor<mark>l</mark>d, and He<mark>llo</mark>, <mark>Pluto</mark>! 

Answer 1

If you need fast and compact code (single line), try the following:

 var $marks = $('mark'); $marks.each(function() { var wholeWord = (this.previousSibling.nodeValue.split(' ').pop() + this.textContent + this.nextSibling.nodeValue.split(' ')[0] ).replace(/[^\w\s]/gi, ''); }); 

JSFiddle (on console login and comments)