的Javascript正则表达式替换文本DIV和< >

Question

var text='<div id="main"><div class="replace">&lt; **My Text** &gt;</div><div>Test</div></div>' 

我想更换带有class =“替代”和HTML实体< >附带了一些其他文本DIV中格。

即输出：

'<div id="main"> Hello **My Text** Hello <div>Test</div> </div>' 

我已经试过

var div = new RegExp('<[//]{0,1}(div|DIV)[^><]*>', 'g'); 
text = text.replace(div, "Hello"); 

但是这将替换所有股利。

任何帮助感激地收到！

Answer 1

如果一个jQuery的解决方案是可以接受的：

text = $(text) // Convert HTML string to Jquery object 
     .wrap("<div />") // Wrap in a container element to make... 
     .parent()  // the whole element searchable 
     .find("div.replace") // Find <div class="replace" /> 
      .each(function() // Iterate over each div.replace 
      { 
      $(this) 
       .replaceWith($(this).html() // Replace div with content 
       .replace("&lt;", "<sometext>") 
       .replace("&gt;", "</sometext>")); // Replace text 
      }) 
     .end().html(); // return html of $(text) 

这台text到：

<div id="main"><sometext> My Text </sometext><div>Test</div></div> 

并能再次替换：

text = text.replace('<sometext>', '<div class="replace">&lt;') 
      .replace('</sometext>', '&gt;</div>'); 

http://api.jquery.com/jquery/#jQuery2
http://api.jquery.com/each/
http://api.jquery.com/find/
http://api.jquery.com/html/

Answer 2

在纯JS这将是这样的：

var elements = document.getElementsByClassName('replace'); 
var replaceTag = document.createElement('replacetext'); 
for (var i = elements.length - 1; i >= 0; i--) { 
    var e = elements[i]; 
    e.parentNode.replaceChild(replaceTag, e); 
};​ 

Answer 3

考虑使用DOM来代替;你已经拥有你想要的结构，因此换出节点本身（从@maxwell's code大量举债，但流动儿童左右为好）：

var elements = document.getElementsByClassName('replace'); 
for(var i = elements.length-1; i>= 0; --i) { 
    var element = elements[i]; 
    var newElement = document.createElement('replacetext'); 
    var children = element.childNodes; 
    for(var ch = 0; ch < children.length; ++i) { 
     var child = children[ch]; 
     element.removeChild(child); 
     newElement.appendChild(child); 
    } 
    element.parentNode.insertBefore(newElement,element); 
    element.parentNode.removeChild(element); 
} 

给定类的每一个元素，那么，它会移动每个在使用该元素的位置插入新元素并最终移除它自己之前，将其子元素移至新元素。

我唯一的问题是数组中项目的修改是否返回getElementByClassName会导致问题;在处理它之前可能需要额外的检查以查看该元素是否有效，或者您可能希望将其作为递归函数编写，并首先从最深的节点处理树。

看起来好像更多的工作，但这应该更快（在你改变它之后不再重新解析html，元素移动只是参考值分配）并且更加健壮。 Attempting to parsing HTML may damage your health.

重读这个问题（总是一个很好的计划），你从字符串中的文本开始。如果这是真正的起点（即你不只是拉说出来的innerHTML的值），然后使用上面的只是创建一个临时父元素：

var fosterer = document.createElement('div'); 
fosterer.innerHTML = text; // your variable from the question 

，然后进行使用fosterer.getElementsByClassName。

Answer 4

这是一个疯狂的正则表达式相匹配你想要什么：

var text='<div id="main"><div class="replace">&lt; **My Text** &gt;</div><div>Test</div></div>' 

var r = /(<(div|DIV)\s+class\s*?=('|")\s*?replace('|")\s*?>)(\s*?&lt;)(.*?)(&gt;\s*?)(<\/(div|DIV)\s*?>)/g; 

整个更换可以进行：

text.replace(r, function() { 
     return 'Hello' + arguments[6] + 'Hello'; 
    }); 

请让我知道，如果有与解决的问题:) 。

顺便说一句：我是完全反对像在答案的正则表达式...如果你已与复杂的正则表达式使得它有可能是更好的方式来处理这个问题......