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 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 页面时也很有用，您需要将 HTML 结果解析为临时 DOM 对象，但不想仅仅将内容转储到新创建元素的 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

享受吧。

Answer 2

如果我理解正确，您想将说“:)”转换为表情符号。为此，您需要解析文本并将这些字符替换为 img 元素。所以你想做这样的事情：

<script>

function toArray(collection) {
  var arr = [];
  for (var i=0, iLen=collection.length; i<iLen; i++) {
    arr[i] = collection[i];
  }
  return arr;
}

function replaceTextWithEmoticon(el) {
  var re0 = /\:\)/g;
  var emo0 = document.createElement('img');
  emo0.src = 'https://mail.google.com/mail/e/35D'; 
  var node, txt, frag;
  var nodes = toArray(el.childNodes);

  for (var i=0, iLen=nodes.length; i<iLen; i++) {
    node = nodes[i];

    // If it's an element node, process the content
    if (node.nodeType == 1) {
      replaceTextWithEmoticon(node);

    // If it's a text node, look for matching text and replace with emoticon
    } else if (node.nodeType == 3 && re0.test(node.data)) {
      txt = node.data.split(re0);
      frag = document.createDocumentFragment();

      for (var j=0, jLen=txt.length - 1; j<jLen; j++) {

        frag.appendChild(document.createTextNode(txt[j]));
        frag.appendChild(emo0.cloneNode(false));
      }

      if (txt[j] && txt[j].length) {
        frag.appendChild(document.createTextNode(txt[j]));
      }
    }
    node.parentNode.replaceChild(frag, node);
  }
}

</script>

<p id="p0">here is a smily:) and another two:):)</p>
<button onclick="
  replaceTextWithEmoticon(document.getElementById('p0'));
">Replace with emoticon</button>

上面需要修改以处理每个文本节点中的多个不同表情，但我想你明白了。

Answer 3

jsFiddle Demo

利用可用的工具。您可以从已存储在 pItems 中的元素向下导航 DOM。第一个图像标签，您将更改 src。这将起作用：

pItems[i].getElementsByTagName("img")[0].src = kissSource;

Answer 4

我不知道如何评论其他人的帖子，但如果你在@RobG 回复中添加过滤器，它会让你到达那里。 （PS：我确实提交了代码编辑建议）

....
var nodes = toArray(el.childNodes);

if (node.nodeName != "#text") //will allow embedded <b> <img> <a> etc to work.
   continue;

for (var i=0, iLen=nodes.length; i<iLen; i++) {
   ....

<p id="p0">here is a smily:) and <b>another</b> <a href="www.google.com">google</a> two:):) <i>italics</i></p>
    ....

或者，如果您想明确查找要跳过的某些元素，例如 <B> 或 <IMG> 或 <A> 等。

Answer 5

这与我必须在我的插件 (ImageZone) 上获得完整评论的问题相同。

我认为使用 innerHTML 对您来说不是一个好主意，因为您将丢失在目标节点上注册的所有事件侦听器。我认为您可以使用这样的代码：

var treeWalker = document.createTreeWalker(
 node,
 NodeFilter.SHOW_ALL,
 { acceptNode:function (node) {
         return node.nodeType == Node.TEXT_NODE ? 
                  NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
 }},false);

 or just

var treeWalker = document.createTreeWalker(
 node,
 NodeFilter.SHOW_TEXT,
 { acceptNode:function (node) {return NodeFilter.FILTER_ACCEPT; }},false);

 while(treeWalker.nextNode()) {
     var n=walker.currentNode;
     var text=n.nodeValue;
     var a= text.split(/(--- your emoticon regexp code ---))/g);
     if (a.length > 1){
         n.insertAfter(document.createTextNode(a[0]));
         var img=document.createElement("img");
         switch (a[1]){
             case '...': img.setAttribute('src','...'); break;
         } 
         // or img.setAttribute('src',emos_srcs[a[1]]);

         n.insertAfter(img);
         n.insertAfter(document.createTextNode(a[2]));
         n.parentNode.removeChild(n);
     }

 }