Ответ 1

Рабочее решение

На основе вашего последнего комментария к @Giuseppe и вашего неправильного стиля, который вы заимствовали из моего сообщения, единственным решением было бы избежать рекурсии или итерации через текстовые строки, которые ищут соответствующие элементы для вашего regEx.

• Примените регулярное выражение к вашей строке, как вы предлагаете.
• После завершения сборки DOM из этой строки с использованием синтаксического анализатора HTMLify
• Замените node на новый DOM node, построенный из строки.

Примечание. Это также полезно при перетаскивании HTML-страницы AJAX, и вам нужно проанализировать результаты HTML во временном объекте DOM, но не хотите просто выгружать содержимое в innerHTML вновь созданного элемента. Также обратите внимание, что использование createDocumentFragment не подходит, поскольку вы не можете перемещаться по фрагменту, как дерево DOM.

Шаги звучат жестко, но в Stackoverflow есть несколько отличных сообщений, которые упрощают работу!
После проведения исследований для вас и работы в теперь устаревшее решение и парсеры dom, которые не будут работать для вас Я столкнулся с решением от @rob-w: синтаксического анализатора

В ваш код будет включен парсер DOM из @rob-w link plus:

     /* 
      * 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

Enjoy.

Ответ 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 an element node, process the content
    if (node.nodeType == 1) {
      replaceTextWithEmoticon(node);

    // If it 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>

Вышеизложенное необходимо изменить, чтобы иметь дело с несколькими различными смайликами в каждом тексте node, но я думаю, что вы поняли эту идею.

Ответ 3

jsFiddle Demo

Воспользуйтесь имеющимися инструментами. Вы можете перемещаться по DOM из элемента, который вы уже сохранили в pItems. Первый тег изображения, вы измените src. Это будет работать:

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

Ответ 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> и т.д.

Ответ 5

Это то же самое, что я должен получить полный обзор моего Addon (ImageZone).

Думаю, вам не рекомендуется использовать innerHTML, так как вы потеряете всех прослушивателей событий, зарегистрированных по целям node. Я думаю, вы могли бы использовать такой код:

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

 }