innerHTML:如何避免

Question

我正在编写一个插件,它将表情符号转换为特定网站的文本块中的图像.简单的答案是使用正则表达式来检测innerHTML上的触发器文本并插入img标记,然后将字符串传递回innerHTML部分中的dom元素.DOM元素块可能已经在innerHTML部分中具有锚<a>和/或文本格式<b>,<i>,<u>.

例如

    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 如何将HTML作为XML读取？但也许是div的一部分？),这反过来可能是转换为JSON,后者又可以转换回以下DOM:https: //developer.mozilla.org/en-US/docs/XUL/School_tutorial/DOM_Building_and_HTML_Insertion？redlocale = en-US&redctsctslug = XUL_School%2FDOM_Building_and_HTML_Insertion#JSON_Templating

我不知道jQuery,所以如果有可能使用javascript,那将是理想的.

我是否应该在不针对innerHTML运行正则表达式的情况下解决此问题,从而避免问题？

非常感谢,JennaS

Answer 1

工作方案

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

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

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

这些步骤听起来很难，但 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

享受。