StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POJavaScript: Given an offset and substring length in an HTML string, what is the parent node?
text
Body
copied!<p>My current project requires locating an array of strings within an element's text content, then wrapping those matching strings in <code><a></code> elements using JavaScript (requirements simplified here for clarity). I need to avoid jQuery if at all possible - at least including the full library.</p> <p>For example, given this block of HTML:</p> <pre><code><div> <p>This is a paragraph of text used as an example in this Stack Overflow question.</p> </div> </code></pre> <p>and this array of strings to match:</p> <pre><code>['paragraph', 'example'] </code></pre> <p>I would need to arrive at this:</p> <pre><code><div> <p>This is a <a href="http://www.example.com/">paragraph</a> of text used as an <a href="http://www.example.com/">example</a> in this Stack Overflow question.</p> </div> </code></pre> <p>I've arrived at a solution to this by using the <code>innerHTML()</code> method and some string manipulation - basically using the offsets (via <code>indexOf()</code>) and lengths of the strings in the array to break the HTML string apart at the appropriate character offsets and insert <code><a href="http://www.example.com/"></code> and <code></a></code> tags where needed.</p> <p>However, an additional requirement has me stumped. I'm not allowed to wrap any matched strings in <code><a></code> elements if they're already in one, or if they're a descendant of a heading element (<code><h1></code> to <code><h6></code>).</p> <p>So, given the same array of strings above and this block of HTML (the term matching has to be case-insensitive, by the way):</p> <pre><code><div> <h1>Example</a> <p>This is a <a href="http://www.example.com/">paragraph of text</a> used as an example in this Stack Overflow question.</p> </div> </code></pre> <p>I would need to disregard both the occurrence of "Example" in the <code><h1></code> element, and the "paragraph" in <code><a href="http://www.example.com/">paragraph of text</a></code>.</p> <p>This suggests to me that I have to determine which node each matched string is in, and then traverse its ancestors until I hit <code><body></code>, checking to see if I encounter a <code><a></code> or <code><h_></code> node along the way.</p> <p>Firstly, does this sound reasonable? Is there a simpler or more obvious approach that I've failed to consider? It doesn't seem like regular expressions or another string-based comparison to find bounding tags would be robust - I'm thinking of issues like self-closing elements, irregularly nested tags, etc. There's also <a href="https://stackoverflow.com/questions/1732348/regex-match-open-tags-except-xhtml-self-contained-tags/1732454#1732454">this</a>...</p> <p>Secondly, is this possible, and if so, how would I approach it?</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload