Question

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

我想用class =“replace”替换div，而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");

但这将取代所有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'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。

Javascript正则表达式替换文本div和＆lt; ＆GT;

4 个答案: