Can't understand why replace() is not working here

Question

My input is:

'<div><strong>test</strong><div><strong>kkk</strong></div><div><strong>111</strong></div></div>'

And the output needs to be:

'<div><strong>test</strong><div><strong>kkk</strong></div><div>111</div></div>'

(<strong> tag unwrapped from 111)

Here is what I have so far:

var input = '<div><strong>test</strong><div><strong>kkk</strong></div><div><strong>111</strong></div></div>';

var effect = 'strong',  // dynamic
    selectedText = '111';  // dynamic

var regex = new RegExp('<' + effect + '>.*' + selectedText + '.*<\/' + effect + '>');
                       
if(regex.test(input)){
    console.log('replacing');
    input = input.replace(regex, selectedText);
}

console.log(input);

For some reason, it is giving me the output as: <div>111</div></div>

How do I fix this?

You can for instance [create a dummy DOM](http://stackoverflow.com/a/10585079/67579) and then rewrite it that way; or use xpath. It is better because [a regex is not capable of processing recursive structures](http://stackoverflow.com/questions/701166/can-you-provide-some-examples-of-why-it-is-hard-to-parse-xml-and-html-with-a-reg). — Willem Van Onsem, Jun 02 '15 at 11:09

Wiktor Stribiżew · Accepted Answer · 2015-06-02T11:23:05.337

3

Your current regex <strong>.*111.*<\/strong> matches too much (= is greedy).

You need to only consume non-tags with [^<>]*:

var input = '<div><strong>test</strong><div><strong>kkk</strong></div><div><strong>111</strong></div></div>';

var effect = 'strong',  // dynamic
    selectedText = '111';  // dynamic

var regex = new RegExp('<' + effect + '>([^<>]*)' + selectedText + '([^<>]*)</' + effect + '>');
// Or this one if you do not want to keep any text around the selectedText
//var regex = new RegExp('<' + effect + '>([^<>]*)' + selectedText + '([^<>]*)</' + effect + '>');
                       
if(regex.test(input)){
    console.log('replacing');
    input = input.replace(regex, "$1" + selectedText + "$2");
    // Or this one if you opt to replace the whole text with your selectedText
    // input = input.replace(regex, selectedText);
}

console.log(input);

edited Jun 02 '15 at 11:23

answered Jun 02 '15 at 11:05

Wiktor Stribiżew

607,720
39
448
563

`([^<>]*)' + selectedText + '([^<>]*)` and `"$1" + selectedText + "$2")` is in case you want to keep the text around your `selectedText`. If you do not want to keep it, you can use original suggestion. What is working better? I added both options to the answer now. – Wiktor Stribiżew Jun 02 '15 at 11:18
Both are working good, cant say which one is better. I will do a few tests and let you know. – Rahul Desai Jun 02 '15 at 11:37
1

Don't do a few tests, do a few milliion. I guarantee that whenever you process XML with regular expressions, someone can write a test case where your code will give the wrong answer. – Michael Kay Jun 02 '15 at 13:50

score 1 · Answer 2 · edited May 23 '17 at 12:14

.* in your regex is matched greedily, i.e., it will try to cover as much of the input as possible while still getting the whole expression to match. Removing the wildcards fixes the issue:

var input = '<div><strong>test</strong><div><strong>kkk</strong></div><div><strong>111</strong></div></div>';

var effect = 'strong',  // dynamic
    selectedText = '111';  // dynamic

var regex = new RegExp('<' + effect + '>' + selectedText + '<\/' + effect + '>');
                       
if(regex.test(input)){
    console.log('replacing');
    input = input.replace(regex, selectedText);
}

console.log(input);

Output:

"replacing" js:21:4
"<div><strong>test</strong><div><strong>kkk</strong></div><div>111</div></div>"

But as CommuSoft mentioned in the comments, XML- or HTML-specific tools like xpath are a much better choice for querying and manipulating nested XML or HTML structures. Your manipulation can be looked at as a transformation from one nested structure to another, differently nested one, so xslt might be something to look at.

Can't understand why replace() is not working here

2 Answers2