javascript - 在 javascript 中使用替换时不应替换属性

Question

当我用户用另一个内容替换该内容时，属性也会替换。意味着如果您检查下面的这个 URL，有一个文本“my_text”需要替换为“Mark”。现在这个替换，但包括 anchor 属性“my_text”也替换。所以我只需要替换除属性之外的内容。

var src_str = $("#test").html();
var term = "mY_text";
term = term.replace(/(\s+)/,"(<[^>]+>)*$1(<[^>]+>)*");
var pattern = new RegExp("("+term+")", "gi");

src_str = src_str.replace(pattern, "<mark>$1</mark>");
src_str = src_str.replace(/(<mark>[^<>]*)((<[^>]+>)+)([^<>]*<\/mark>)/,"$1</mark>$2<mark>$4");

$("#test").html(src_str);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test">this is <a href="mY_text" >my</a> text that needs highlighting my_text</div>

Answer 1

如果我理解正确，您希望在文本内容中出现字符串“my_text”时替换它，而不是在属性中出现时替换它。

这是一个很好的例子，说明了为什么使用正则表达式操作 HTML 不是一个好主意:正则表达式不知道 DOM 节点、属性和文本之间的区别。相反，使用 DOM 遍历方法来查找要修改的 DOM 部分，并仅对这些部分进行操作:

// contents() includes text nodes, which is what we want to search through here:
$('#test').contents().each(function() {
  // If you were just replacing text, you could simply set this.textContent 
  // to a new value. But since it looks like you're trying to insert 
  // a DOM node, we need to convert the text node into a DOM node:
  if (this.textContent.indexOf('my_text') > -1) { // there's a match 
    var replacementNode = document.createElement('span'); 
    // the regex can be simple here, because we know we're working only with text:
    var newContent = this.textContent.replace(/(my_text)/,'<mark>$1</mark>'); 
    replacementNode.innerHTML = newContent;
    // ... and then replace the text node with the new DOM node:
    this.parentNode.insertBefore(replacementNode,this);
    this.parentNode.removeChild(this)
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test">this is <a href="my_text" >my</a> text that needs highlighting my_text</div>

(上面只会作用于#test元素的直接子元素。如果需要在DOM树中更深入地搜索，可以使用 one of the methods shown here 遍历树并找到文本节点，然后将上述代码应用于这些元素。)