StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>You would have to figure out how to search the DOM to find the elements you want. For example, you can find things by tag name and then examine the context around a given tag to see if it's what you are looking for.</p> <p>If you provide more info on what exactly you're trying to find, we could likely help with more specific code.</p> <p>For example, <code>document.getElementsByTagName("br")</code> finds all <code><br></code> tags in the document. You could examine each one to find double <code><br></code> tags if that's what you're trying to find or if you're looking for some specific text before or after double <code><br></code>tags, you could look for that too. As I said in my comment, you need to be more specific about what pattern you're actually looking for before more specific code can be suggeseted.</p> <p>For example, here's how you would search for a particular text pattern that follows a <code><br></code> tag in your document:</p> <pre><code>var items = document.getElementsByTagName("br"); // modify this regex to suit what you're trying to match var re = /\w+\s\(\w+\)/; for (var i = 0, len = items.length; i < len; i++) { var node = items[i]; while ((node = node.nextSibling) && node.nodeType == 3) { if (re.test(node.nodeValue)) { // add a marker test node (just for test purposes) var span = document.createElement("span"); span.className = "marker"; span.innerHTML = "X"; node.parentNode.insertBefore(span, node.nextSibling); } } } </code></pre> <p>You can modify the regex to be whatever you want the search to be looking for.</p> <p>You can see a working demo here: <a href="http://jsfiddle.net/jfriend00/s9VMn/" rel="nofollow">http://jsfiddle.net/jfriend00/s9VMn/</a></p> <hr> <p>OK, here's one more shot at guessing what pattern you're looking for using a regular expression. This looks for two successive <code><br></code> tags followed by text that matches the pattern. It then wraps that text in a span so it can be styled according to even or odd.</p> <pre><code>function getTextAfter(node) { // collect text from successive text nodes var txt = ""; while ((node = node.nextSibling) && node.nodeType == 3) { txt += node.nodeValue; } return(txt); } function wrapTextInSpan(preNode, cls) { // collect successive text nodes // into a span tag var node = preNode, item; var span = document.createElement("span"); span.className = cls; node = node.nextSibling; while (node && node.nodeType == 3) { item = node; node = node.nextSibling; span.appendChild(item); } preNode.parentNode.insertBefore(span, preNode.nextSibling); return(span); } // find double br tags var items = document.getElementsByTagName("br"); var cnt = 1; var re = /\w+\s+\([^)]+\)\s+-\s+(Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec)\s+\d+,\s+\d+\d+/i; for (var i = 0, len = items.length; i < len; i++) { var node = items[i]; // collect text from successive text nodes var txt = ""; while ((node = node.nextSibling) && node.nodeType == 3) { txt += node.nodeValue; } // if no text, check for successive BR tags if (txt.replace(/\n|\s/g, "") == "") { if (i + 1 < len && node === items[i + 1]) { // found a double BR tag // get the text after it txt = getTextAfter(node); if (re.test(txt)) { wrapTextInSpan(node, "marker" + (cnt % 2 ? "Odd" : "Even")); ++cnt; } ++i; } } } </code></pre> <p>Working demo here: <a href="http://jsfiddle.net/jfriend00/ewApy/" rel="nofollow">http://jsfiddle.net/jfriend00/ewApy/</a></p> <hr> <p>Here's one more version that actually inserts an expand/collapse target and does the expand/collapse of the sections. This could be so easy with the right HTML and with a nice library like jQuery, but without either it's a lot more code:</p> <pre><code>function getTextAfter(node) { // collect text from successive text nodes var txt = ""; while ((node = node.nextSibling) && node.nodeType == 3) { txt += node.nodeValue; } return(txt); } function wrapTextInSpan(preNode, cls) { // collect successive text nodes // into a span tag var node = preNode, item; var span = document.createElement("span"); span.className = cls; node = node.nextSibling; while (node && node.nodeType == 3) { item = node; node = node.nextSibling; span.appendChild(item); } preNode.parentNode.insertBefore(span, preNode.nextSibling); return(span); } function wrapBetweenInSpan(preNode, postNode, cls) { var node = preNode, item; var span = document.createElement("span"); span.className = cls; node = node.nextSibling; if (node && node.nodeType == 1 && node.tagName == "BR") { preNode = node; node = node.nextSibling; } while (node && node != postNode) { item = node; node = node.nextSibling; span.appendChild(item); } preNode.parentNode.insertBefore(span, preNode.nextSibling); return(span); } function toggleClass(el, cls) { var str = " " + el.className + " "; if (str.indexOf(" " + cls + " ") >= 0) { str = str.replace(cls, "").replace(/\s+/, " ").replace(/^\s+|\s+%/, ""); el.className = str; } else { el.className = el.className + " " + cls; } } function hasClass(el, cls) { var str = " " + el.className + " "; return(str.indexOf(" " + cls + " ") >= 0); } function addButton(target) { var span = document.createElement("span"); span.className = "expandoButton"; span.innerHTML = "+++"; span.onclick = function(e) { var expando = this; do { expando = expando.nextSibling; } while (expando && !hasClass(expando, "markerContents")); toggleClass(expando, "notshown"); }; target.parentNode.insertBefore(span, target.nextSibling); } // find double br tags var items = document.getElementsByTagName("br"); var cnt = 1; var spans = []; var re = /\w+\s+\([^)]+\)\s+-\s+(Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec)\s+\d+,\s+\d+\d+/i; for (var i = 0, len = items.length; i < len; i++) { var node = items[i]; // collect text from successive text nodes var txt = ""; while ((node = node.nextSibling) && node.nodeType == 3) { txt += node.nodeValue; } // if no text, check for successive BR tags if (txt.replace(/\n|\s/g, "") == "") { if (i + 1 < len && node === items[i + 1]) { // found a double BR tag // get the text after it txt = getTextAfter(node); if (re.test(txt)) { var span = wrapTextInSpan(node, "marker marker" + (cnt % 2 ? "Odd" : "Even")); spans.push(span); ++cnt; } ++i; } } } // now wrap the contents of each marker for (i = 0, len = spans.length; i < len; i++) { wrapBetweenInSpan(spans[i], spans[i+1], "markerContents shown"); addButton(spans[i]); } </code></pre> <p>Working demo of this version: <a href="http://jsfiddle.net/jfriend00/cPbqC/" rel="nofollow">http://jsfiddle.net/jfriend00/cPbqC/</a></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