How to use regex to replace text between tags

Question

I'd like to replace some text in a string that represents a div tag that may or may not also include style and class attributes. For example,

var s = "<div style='xxx' class='xxx'>replaceThisText<div>

If it were just the tag, I believe I could just do this:

str = str.replace(/<div>[\s\S]*?<\/div>/, '<div>' + newText+ '<\/div>');

But how do I take the attributes into account?

Parse it into a DOM element then change .innerHTML or .textContent. — Spencer Wieczorek
– Spencer Wieczorek, Commented Jan 6, 2017 at 16:37

Community · Accepted Answer · 2017-05-23 12:08:59Z

2

Generate a temporary element with your string as HTML content then get the div within it to update content after updating the content get back the HTML of temporary element.

var s = "<div style='xxx' class='xxx'>replaceThisText<div>";

// create a temporary div element
var temp = document.createElement('div');

// set content as string
temp.innerHTML = s;

// get div within the temporary element
// and update the content within the div
temp.querySelector('div').innerHTML = 'newText';

// get back the current HTML content in the
// temporary div element
console.log(temp.innerHTML)

Why not regex?

RegEx match open tags except XHTML self-contained tags

Using regular expressions to parse HTML: why not?

edited May 23, 2017 at 12:08

CommunityBot

11 silver badge

answered Jan 6, 2017 at 16:38

Pranav C Balan

115k25 gold badges172 silver badges195 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Spencer Wieczorek Over a year ago

What about temp.firstChild.innerHTML='newText' other than using a querySelector?

Pranav C Balan Over a year ago

@SpencerWieczorek : that's also fine if there is no leading whitespace or text in the content... otherwise it may be textNode

RomanPerekhrest · Accepted Answer · 2017-01-06 17:24:53Z

0

Regex will never be a good decision to parse html content.
Consider the following short solution using DOMParser object(for browsers which support DOMParser implementation, see compatibility table):

var s = "<div style='xxx' class='xxx'>replaceThisText<div>",
    tag = (new DOMParser()).parseFromString(s, 'text/html').querySelector('.xxx');

tag.textContent = 'newText';  // replacing with a new text
console.log(tag.outerHTML);   // outputs the initial tag representation with replaced content

https://developer.mozilla.org/ru/docs/Web/API/DOMParser

edited Jan 6, 2017 at 17:24

answered Jan 6, 2017 at 17:19

RomanPerekhrest

93.1k4 gold badges75 silver badges112 bronze badges

Collectives™ on Stack Overflow

How to use regex to replace text between tags

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related