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

Question

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

我想用class =“ replace”和html实体< >替换div < > < > 与其他文本一起进入该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");

但这将替换所有div。

任何帮助表示感谢！

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

这是一个符合您需求的疯狂正则表达式：

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

如果解决方案有问题，请告诉我：)。

顺便说一句：我完全反对像答案中的正则表达式...如果您使用了这种复杂的正则表达式，可能有更好的方法来解决问题...

Answer 4

考虑使用DOM代替； 您已经有了所需的结构，因此换出节点本身（从@maxwell的代码大量借用，但也移动了子代）：

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后无需重新解析html，元素移动只是参考值分配），并且更加健壮。 尝试解析HTML可能会损害您的健康。

重新阅读问题（总是有一个好的计划），您将从字符串中的文本开始。 如果这确实是起点（即您不只是将其从innerHTML值中拉出），则要使用上述内容，只需创建一个临时父元素：

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

然后继续使用fosterer.getElementsByClassName 。