javascript - innerHTML : How To Avoid

Question

我正在编写一个插件，它将表情符号转换为特定站点文本 block 中的图像。简单的答案是使用正则表达式检测 innerHTML 上的触发文本并插入 img 标签，然后将字符串通过管道返回到 innerHTML 部分中的 dom 元素。 DOM 元素 block 可能已经有 anchor <a>和/或文本格式 <b>,<i>,<u>在 innerHTML 部分。

例如

    var textBlock = pItems[i].innerHTML;
    var kissSource = 'https://mail.google.com/mail/e/35D';
    textBlock = textBlock.replace(/(^|[^&lt;]|[^&gt;]):\*/g, "<img class='emoticon' src='" + kissSource + "' />");
 -->      pItems[i].innerHTML = textBlock;  //<-can I avoid this to be in compliance with Mozilla addons reqmnts

我搜索了好几个小时如何将 DOM(或 HTML 字符串)转换为 XML(我知道:HTML!=XLM How to read HTML as XML? 但也许是 div 的一部分？)这又可以转换到 JSON 谁反过来..可以转换回 DOM 以下: https://developer.mozilla.org/en-US/docs/XUL/School_tutorial/DOM_Building_and_HTML_Insertion?redirectlocale=en-US&redirectslug=XUL_School%2FDOM_Building_and_HTML_Insertion#JSON_Templating

我不懂 jQuery，所以如果可以的话请使用 javascript，那将是最理想的。

我是否应该在不对 innerHTML 运行正则表达式的情况下解决这个问题，从而避免出现问题？

非常感谢，珍娜

Answer 1

工作解决方案

根据您最近对@Giuseppe 的评论，以及您从我的帖子中借用的格式错误的样式，唯一的解决方案是避免递归或遍历文本字符串以寻找与您的正则表达式匹配的元素。

1. 按照您的建议将正则表达式应用于您的字符串。
2. 完成后使用 HTMLify 字符串解析器从该字符串构建 DOM
3. 用从字符串构建的新 DOM 节点替换节点。

注意:这在拉取 AJAX HTML 页面时也很有用，您需要在临时 DOM 对象中解析 HTML 结果，但不想仅仅将内容转储到新创建元素的 innerHTML 中。另请注意，使用 createDocumentFragment 将不合适，因为您无法像 DOM 树那样导航片段。

这些步骤听起来很难，但 Stackoverflow 上有一些很棒的帖子可以让这一切变得简单!
在为您进行研究并遇到 a now obsolete solution 之后和 dom parsers which won't work for you我遇到了来自@rob-w 的解决方案:a dom parser

您的代码将包括来自@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

享受吧。