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
– John M, Commented Aug 1, 2018 at 12:50

Daniel Beck · Accepted Answer · 2018-08-01 15:01:12Z

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.)

Programmer · Accepted Answer · 2018-08-01 12:44:11Z

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 1, 2018 at 12:44

Programmer

2,1231 gold badge13 silver badges21 bronze badges

2 Comments

user1173465 Over a year ago

Please check the jsfiddle I posted once. jsfiddle.net/UPs3V/2260

user1173465 Over a year ago

i want to replace one "home" in the body by 'content' if the class name is body. that class name also changing

Collectives™ on Stack Overflow

Attributes shouldn't replace when uses replace in javascript

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related