Attributes shouldn't replace when uses replace in javascript

Question

when I user replace the content with another content the attributes also replacing. Means if you check this URL below, there is a text 'my_text' needs to replace with 'Mark'. Now this replacing but including this the anchor attribute 'my_text' also replacing. So I needs to replace only the content except attributes.

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>

Please include the relevant parts of your code in the question, not just as a link to JSFiddle — John M, Aug 01 '18 at 12:50
Duplicate of https://stackoverflow.com/questions/5904914/javascript-regex-to-replace-text-not-in-html-attributes/5904945 — JM-AGMS, Aug 01 '18 at 19:47

Daniel Beck · Answer 1 · 2018-08-01T15:01:12.307

If I'm understanding you correctly, you want to replace the string "my_text" when it appears in the text content, but not when it appears in an attribute.

This is a good example of why it's not a good idea to manipulate HTML with regex: regex doesn't know the difference between DOM nodes and attributes and text. Instead, use DOM traversal methods to find the portions of the DOM you want to modify, and work only on those portions:

// 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>

(The above will only act on the immediate children of the #test element. If you need to search deeper in the DOM tree, you can use one of the methods shown here to walk through the tree and find the text nodes, then apply the above code to those elements.)

score 0 · Answer 2 · answered Aug 01 '18 at 12:44

0

If you want to change the text content use $('a').text('your new text').

If you want to change the href use $('a').attr('href', 'your new url').

There is no relation between the two.

answered Aug 01 '18 at 12:44

Programmer

1,973
1
12
20

1

Please check the jsfiddle I posted once. http://jsfiddle.net/UPs3V/2260/ – user1173465 Aug 01 '18 at 12:47
i want to replace one "home" in the body by 'content' if the class name is body. that class name also changing – user1173465 Aug 01 '18 at 12:52

Attributes shouldn't replace when uses replace in javascript

2 Answers2