17 replies

RegEx with match() and replace()

I have a regular expression that grabs the double quotes and value for an html tag attribute:

str.match(RegEx)

str.match(RegEx)

. And then I use

str.replace(RegEx, replacementStr)

str.replace(RegEx, replacementStr)

where the

replacementStr

replacementStr

is a span tag with a class for changing the color in a

pre

pre

block.

It works like a charm when I only have 1 attribute in my html tag. But when I have 2 attributes (e.g. id and class), I get both matches in each attribute. I can't figure out why it doubling since the id and class values are different. Any insight would be great:

convertedArr.forEach(line => {
  // Quotes
  if (line.match(dblQuote)) {
    result = line.replace(dblQuote, `<span class="${classes[1]}">${line.match(dblQuote)}</span>`);
  } else {
    result = line;
  }
});

convertedArr.forEach(line => {
  // Quotes
  if (line.match(dblQuote)) {
    result = line.replace(dblQuote, `<span class="${classes[1]}">${line.match(dblQuote)}</span>`);
  } else {
    result = line;
  }
});

Here is my RegEx and some console.log:

const dblQuote = /(&quot;[.\w\/:*?-]*\w)(&quot;[.\w\/:*?-]*)/g;
console.log(line.match(dblQuote));
// ['&quot;something&quot;', '&quot;test&quot;']
// ['&quot;test-img&quot;', '&quot;./img/file.jpeg&quot;']
console.log(result)
// &lt;p id=<span class="light-blue">&quot;something&quot;,&quot;test&quot;</span> class=<span class="light-blue">&quot;something&quot;,&quot;test&quot;</span>&gt;words here&lt;/p&gt;

const dblQuote = /(&quot;[.\w\/:*?-]*\w)(&quot;[.\w\/:*?-]*)/g;
console.log(line.match(dblQuote));
// ['&quot;something&quot;', '&quot;test&quot;']
// ['&quot;test-img&quot;', '&quot;./img/file.jpeg&quot;']
console.log(result)
// &lt;p id=<span class="light-blue">&quot;something&quot;,&quot;test&quot;</span> class=<span class="light-blue">&quot;something&quot;,&quot;test&quot;</span>&gt;words here&lt;/p&gt;

Mt regexr.com link: https://regexr.com/76539

RegExr

RegExr: Learn, Build, & Test RegEx

RegExr is an online tool to learn, build, & test Regular Expressions (RegEx / RegExp).

KP-C

Kevin Powell - Community•4y ago•

17 replies

Kernix

RegEx with match() and replace()

I have a regular expression that grabs the double quotes and value for an html tag attribute:

str.match(RegEx)

str.match(RegEx)

. And then I use

str.replace(RegEx, replacementStr)

str.replace(RegEx, replacementStr)

where the

replacementStr

replacementStr

is a span tag with a class for changing the color in a

pre

pre

convertedArr.forEach(line => {
  // Quotes
  if (line.match(dblQuote)) {
    result = line.replace(dblQuote, `<span class="${classes[1]}">${line.match(dblQuote)}</span>`);
  } else {
    result = line;
  }
});

convertedArr.forEach(line => {
  // Quotes
  if (line.match(dblQuote)) {
    result = line.replace(dblQuote, `<span class="${classes[1]}">${line.match(dblQuote)}</span>`);
  } else {
    result = line;
  }
});

Here is my RegEx and some console.log:

const dblQuote = /(&quot;[.\w\/:*?-]*\w)(&quot;[.\w\/:*?-]*)/g;
console.log(line.match(dblQuote));
// ['&quot;something&quot;', '&quot;test&quot;']
// ['&quot;test-img&quot;', '&quot;./img/file.jpeg&quot;']
console.log(result)
// &lt;p id=<span class="light-blue">&quot;something&quot;,&quot;test&quot;</span> class=<span class="light-blue">&quot;something&quot;,&quot;test&quot;</span>&gt;words here&lt;/p&gt;

const dblQuote = /(&quot;[.\w\/:*?-]*\w)(&quot;[.\w\/:*?-]*)/g;
console.log(line.match(dblQuote));
// ['&quot;something&quot;', '&quot;test&quot;']
// ['&quot;test-img&quot;', '&quot;./img/file.jpeg&quot;']
console.log(result)
// &lt;p id=<span class="light-blue">&quot;something&quot;,&quot;test&quot;</span> class=<span class="light-blue">&quot;something&quot;,&quot;test&quot;</span>&gt;words here&lt;/p&gt;

Mt regexr.com link: https://regexr.com/76539

RegExr

RegExr: Learn, Build, & Test RegEx

RegExr is an online tool to learn, build, & test Regular Expressions (RegEx / RegExp).

RegEx with match() and replace()

RegEx with match() and replace()

Similar Threads

Similar Threads

Similar Threads