Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<h1>Working Solution</h1> <p>Based on your recent comment to @Giuseppe, and your malformed styling that you borrowed from my post the only solution would be to avoid recursion or iterating through the text strings looking for matching elements for your regEx.</p> <ol> <li>Apply the regex to your string as you are proposing. </li> <li>Once finished build a DOM from that string using a HTMLify string parser</li> <li>Replace the node with the new DOM node built from the string.</li> </ol> <p>NB: This is also useful when pulling in AJAX HTML page and you need to parse the HTML results in a temporary DOM object but don't want to merely dump the contents into a the innerHTML of a newly created element. Also note that using createDocumentFragment will not be suitable as you cannot navigate a fragment like a DOM tree.</p> <p>The steps sound hard but there are a few great posts on Stackoverflow which make it easy!<br> After doing research for you and running into <a href="https://developer.mozilla.org/en-US/docs/Code_snippets/HTML_to_DOM#Using_a_hidden_browser_element_to_parse_HTML_to_a_window.27s_DOM" rel="nofollow noreferrer">a now obsolete solution</a> and <a href="https://stackoverflow.com/questions/2579666/getelementsbytagname-equivalent-for-textnodes">dom parsers which won't work for you</a> I came across a solution from @rob-w: <a href="https://stackoverflow.com/questions/9250545/javascript-domparser-access-innerhtml-and-other-properties/9251106#9251106">a dom parser</a></p> <p>Your code would include the DOM parser from @rob-w link plus:</p> <pre><code> /* * DOMParser HTML extension * 2012-02-02 * * By Eli Grey, http://eligrey.com * Public domain. * NO WARRANTY EXPRESSED OR IMPLIED. USE AT YOUR OWN RISK. */ /*! @source https://gist.github.com/1129031 */ /*global document, DOMParser*/ (function (DOMParser) { "use strict"; var DOMParser_proto = DOMParser.prototype; var real_parseFromString = DOMParser_proto.parseFromString; // Firefox/Opera/IE throw errors on unsupported types try { // WebKit returns null on unsupported types if ((new DOMParser).parseFromString("", "text/html")) { // text/html parsing is natively supported return; } } catch (ex) {} DOMParser_proto.parseFromString = function (markup, type) { if (/^\s*text\/html\s*(?:;|$)/i.test(type)) { var doc = document.implementation.createHTMLDocument(""); var doc_elt = doc.documentElement; var first_elt; doc_elt.innerHTML = markup; first_elt = doc_elt.firstElementChild; if (doc_elt.childElementCount === 1 &amp;&amp; first_elt.localName.toLowerCase() === "html") { doc.replaceChild(first_elt, doc_elt); } return doc; } else { return real_parseFromString.apply(this, arguments); } }; }(DOMParser)); autostyle = function (str) { var boldPattern = /(?![^&lt;]*&lt;\/a&gt;)(^|&lt;.&gt;|[\s\W_])\*(\S.*?\S)\*($|&lt;\/.&gt;|[\s\W_])/g; var italicsPattern = /(?![^&lt;]*&lt;\/a&gt;)(^|&lt;.&gt;|[\s\W])_(\S.*?\S)_($|&lt;\/.&gt;|[\s\W])/g; var strikethroughPattern = /(?![^&lt;]*&lt;\/a&gt;)(^|&lt;.&gt;|[\s\W_])-(\S.*?\S)-($|&lt;\/.&gt;|[\s\W_])/gi; var underlinePattern = /(?![^&lt;]*&lt;\/a&gt;)(^|&lt;.&gt;|[\s\W_])!(\S.*?\S)!($|&lt;\/.&gt;|[\s\W_])/gi; str = str.replace(strikethroughPattern, '$1&lt;s&gt;$2&lt;/s&gt;$3'); str = str.replace(italicsPattern, '$1&lt;i&gt;$2&lt;/i&gt;$3'); str = str.replace(boldPattern, '$1&lt;b&gt;$2&lt;/b&gt;$3'); str = str.replace(underlinePattern, '$1&lt;u&gt;$2&lt;/u&gt;$3'); return str; }; emoticonRegexFunction = function(str) { //do something return str; } RegexWithoutInnerHTML = function () { pItems = document.getElementsByTagName('p'); for (var k = 0; k &lt; pItems.length; k++) { var str = pItems[k].textContent; str = autostyle(str); str = emoticonRegexFunction(str); var doc = new DOMParser().parseFromString('&lt;p&gt;' + str + '&lt;/p&gt;', 'text/html'); pItems[k].parentNode.replaceChild(doc.getElementsByTagName('p')[0], pItems[k]); // pItems[k].innerHTML = str; //&lt;-now do not need innerHTML } }; </code></pre> <p>Full working example on jsbin at: <a href="http://jsbin.com/itiwek/12/edit" rel="nofollow noreferrer">http://jsbin.com/itiwek/12/edit</a></p> <p>Enjoy.</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