工作解决方案

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运行正则表达式的情况下解决此问题，从而避免问题？

非常感谢JennaS

Answer 1

如果我理解正确，你想把“:)”转换为表情符号。为此，您需要解析文本并用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 2

工作解决方案

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

正如您提议的那样，将正则表达式应用于您的字符串。
使用HTMLify字符串解析器完成从该字符串构建DOM后
用从字符串构建的新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 link的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 at http://jsbin.com/itiwek/12/edit

享受。

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);
     }

 }

innerHTML：如何避免

5 个答案:

工作解决方案