実用的なソリューション
@Giuseppeへの最近のコメントと、私の投稿から借用した不正なスタイルに基づくと、唯一の解決策は、再帰を回避したり、正規表現に一致する要素を探してテキスト文字列を反復したりすることです。
- 提案しているように、正規表現を文字列に適用します。
- 完了したら、HTMLify文字列パーサーを使用してその文字列からDOMを構築します
- ノードを、文字列から構築された新しいDOMノードに置き換えます。
注意：これは、AJAX HTMLページをプルするときにも役立ちます。一時的なDOMオブジェクトでHTML結果を解析する必要がありますが、新しく作成された要素のinnerHTMLにコンテンツを単にダンプしたくない場合です。また、DOMツリーのようにフラグメントをナビゲートできないため、createDocumentFragmentの使用は適切ではないことに注意してください。
手順は難しいように聞こえますが、Stackoverflowには簡単な投稿がいくつかあります。
あなたのために調査を行い、今では時代遅れのソリューションとあなたのために機能しないdomパーサーに遭遇した後、私は@ rob-wからのソリューションに出くわしました：domパーサー
コードには、@rob-wリンクからのDOMパーサーに加えて次のものが含まれます。
/*
* 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 && 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 = /(?![^<]*<\/a>)(^|<.>|[\s\W_])\*(\S.*?\S)\*($|<\/.>|[\s\W_])/g;
var italicsPattern = /(?![^<]*<\/a>)(^|<.>|[\s\W])_(\S.*?\S)_($|<\/.>|[\s\W])/g;
var strikethroughPattern = /(?![^<]*<\/a>)(^|<.>|[\s\W_])-(\S.*?\S)-($|<\/.>|[\s\W_])/gi;
var underlinePattern = /(?![^<]*<\/a>)(^|<.>|[\s\W_])!(\S.*?\S)!($|<\/.>|[\s\W_])/gi;
str = str.replace(strikethroughPattern, '$1<s>$2</s>$3');
str = str.replace(italicsPattern, '$1<i>$2</i>$3');
str = str.replace(boldPattern, '$1<b>$2</b>$3');
str = str.replace(underlinePattern, '$1<u>$2</u>$3');
return str;
};
emoticonRegexFunction = function(str) {
//do something
return str;
}
RegexWithoutInnerHTML = function () {
pItems = document.getElementsByTagName('p');
for (var k = 0; k < pItems.length; k++) {
var str = pItems[k].textContent;
str = autostyle(str);
str = emoticonRegexFunction(str);
var doc = new DOMParser().parseFromString('<p>' + str + '</p>', 'text/html');
pItems[k].parentNode.replaceChild(doc.getElementsByTagName('p')[0], pItems[k]);
// pItems[k].innerHTML = str; //<-now do not need innerHTML
}
};
jsbinの完全な実例：http：//jsbin.com/itiwek/12/edit
楽しみ。