HTML标记中的高级JavaScript RegExp替换

我有javascript代码，它的工作原理非常好，如：

var rgx = /MyName/g;
var curInnerHTML = document.body.innerHTML;
curInnerHTML = curInnerHTML.replace(rgx, "<span><span class='myName'>MyNameReplace</span></span>");

var rgx=/MyName/g；
var curInnerHTML=document.body.innerHTML；
curInnerHTML=curInnerHTML.replace（rgx，“MyNameReplace”）；

问题是，即使在包含在HTML属性中的场景中，它也会与正则表达式匹配。如何修改正则表达式，使其仅在HTML内容中找到它？例如，在这个字符串中

    <div class="someclass" title="MyName">
MyName
</div>

我的名字

当前的结果如下（注意title属性中的更改）：

MyNameReplace

但是我需要它（保持title属性不变）：

MyNameReplace

您的最佳选择（比听起来容易得多）不是尝试使用regex解析HTML，而是利用DOM已经拥有并递归处理文本节点这一事实

这里有一个现成的例子：|

//我们使用这个div的'innerHTML'来解析每个replacment的标记
var div=document.createElement（'div'）；
//这是处理所有文本节点的递归下降函数
//在您指定的元素及其子元素中
功能数据置换（节点、rex、文本）{
var儿童、兄弟姐妹、frag；
//我们得到了什么样的节点？
开关（node.nodeType）{
案例1://要素
//最好不要使用“script”元素。
//您可能会发现要添加到此列表中
//（`object`、`applet`、`style`、…）
if（node.nodeName.toUpperCase（）！=“脚本”）{
//这是我们想要处理的元素，从它的
//*最后一个*孩子，继续努力，因为是什么的一部分
//我们正在对DOM进行插入。
for（child=node.lastChild；child；child=sibling）{
//在更改此节点之前，获取对
//跟随它的人
兄弟姐妹=子女。以前的兄弟姐妹；
//重现
doReplacement（儿童、雷克斯、文本）；
}
}
打破
案例3://文本
//一个文本节点--让我们进行替换！
//前两个处理文本节点
//可能包含少于个符号或符号。
//当然，第三个是你的替代者。
div.innerHTML=node.nodeValue
.替换（/&/g，“&；”）
.replace（/你的最佳选择，而且比听起来容易得多，不是尝试使用regex解析HTML，而是利用DOM已经拥有并递归处理文本节点这一事实

这里有一个现成的例子：|

//我们使用这个div的'innerHTML'来解析每个replacment的标记
var div=document.createElement（'div'）；
//这是处理所有文本节点的递归下降函数
//在您指定的元素及其子元素中
功能数据置换（节点、rex、文本）{
var儿童、兄弟姐妹、frag；
//我们得到了什么样的节点？
开关（node.nodeType）{
案例1://要素
//最好不要使用“script”元素。
//您可能会发现要添加到此列表中
//（`object`、`applet`、`style`、…）
if（node.nodeName.toUpperCase（）！=“脚本”）{
//这是我们想要处理的元素，从它的
//*最后一个*孩子，继续努力，因为是什么的一部分
//我们正在对DOM进行插入。
for（child=node.lastChild；child；child=sibling）{
//在更改此节点之前，获取对
//跟随它的人
兄弟姐妹=子女。以前的兄弟姐妹；
//重现
doReplacement（儿童、雷克斯、文本）；
}
}
打破
案例3://文本
//一个文本节点--让我们进行替换！
//前两个处理文本节点
//可能包含少于个符号或符号。
//当然，第三个是你的替代者。
div.innerHTML=node.nodeValue
.替换（/&/g，“&；”）
.replace（/importional“如何修改正则表达式，使其仅在HTML内容中找到？”可靠？您不能。它的可能副本似乎表明您可以访问DOM。使用它。如果需要更强大的（基于DOM的）功能，请使用它选择器，添加jQuery。@Barmar：这里的区别是，在这个问题中，答案是特定于创建一个
a
元素，而这里的替换更复杂（我的答案中几乎允许任何替换）。强制性的“我如何修改正则表达式，使它只在HTML内容中找到它？”可靠吗？您不能。它的可能副本似乎您可以访问DOM。使用它。如果您需要更强大的（基于DOM的）选择器，请添加jQuery。@Barmar：这里的区别是，在这个问题中，答案是特定于创建一个
a
元素，而这里的替换更复杂（在我的回答中，我几乎允许任何替换）。@JimBeam:很高兴这有帮助！@JimBeam:很高兴这有帮助！
        <div class="someclass" title="<span><span class='myName'>MyNameReplace</span</span>">
<span><span class='myName'>
    MyNameReplace</span></span>
    </div>

    <div class="someclass" title="MyName">
<span><span class='myName'>MyNameReplace</span></span>
</div>

// We use this div's `innerHTML` to parse the markup of each replacment
var div = document.createElement('div');

// This is the recursive-descent function that processes all text nodes
// within the element you give it and its descendants
function doReplacement(node, rex, text) {
    var child, sibling, frag;

    // What kind of node did we get?
    switch (node.nodeType) {
        case 1: // Element
            // Probably best to leave `script` elements alone.
            // You'll probably find you want to add to this list
            // (`object`, `applet`, `style`, ...)
            if (node.nodeName.toUpperCase() !== "SCRIPT") {
                // It's an element we want to process, start with its
                // *last* child and work forward, since part of what
                // we're doing inserts into the DOM.
                for (child = node.lastChild; child; child = sibling) {
                    // Before we change this node, grab a reference to the
                    // one that follows it
                    sibling = child.previousSibling;

                    // Recurse
                    doReplacement(child, rex, text);
                }
            }
            break;
        case 3: // Text
            // A text node -- let's do our replacements!
            // The first two deal with the fact that the text node
            // may have less-than symbols or ampersands in it.
            // The third, of course, does your replacement.
            div.innerHTML = node.nodeValue
                                .replace(/&/g, "&amp;")
                                .replace(/</g, "&lt;")
                                .replace(rex, text);

            // Now, the `div` has real live DOM elements for the replacement.
            // Insert them in front of this text node...
            insertChildrenBefore(div, node);
            // ...and remove the text node.
            node.parentNode.removeChild(node);
            break;
    }
}

// This function just inserts all of the children of the given container
// in front of the given reference node.
function insertChildrenBefore(container, refNode) {
    var parent, child, sibling;

    parent = refNode.parentNode;
    for (child = container.firstChild; child; child = sibling) {
        sibling = child.nextSibling;
        parent.insertBefore(child, refNode);
    }
}

doReplacement(document.body,
              /MyName/g,
              "<span><span class='myName'>MyNameReplace</span></span>");