Regex Getting Mad

[harsh yoke]

Okay I decided that I need to stop suffering so, can anyone help me? I were trying new things and solved the most important that was about import JSON. But yeah, it caused a problem. class keyword, it as caused a complete bug that I can't understand why happens.

This is my JS.

// Imports
import * as keyword from '../assets/keys.json' assert { type: "json" };
// Highlighter
function highlight(target) {
  const targets = document.querySelectorAll(target);
  const kws = keyword.default.js;
  const kw = new RegExp(`\\b(${kws.join('|')})\\b(?<!(\\/\\/.*|\\/\\*[^]*?\\*\\/))`, 'g');
  const str = /(['"`])(?:(?!\1)[^\\]|\.|\1)\1/g;
  const com = /\/\/.*|\/\*[^]*?\*\//g;
  const fn = /\w+\s*(?=\([^]*\)\s*\{)|(?<=\.)\s*\w+\s*(?=\([^]*\))|(?<=\()\w+\s*/g;
  targets.forEach(targ => {
    let content = targ.innerHTML;

    content = content.replace(str, `<i class="str">$&</i>`);
    content = content.replace(kw, `<i class="kw">$&</i>`);
    content = content.replace(com, `<i class="com">$&</i>`);
    content = content.replace(fn, `<i class="fn">$&</i>`);

    targ.innerHTML = content;
  });
}
// Apply
highlight('.output');

I've handled to stop it bug more than it was but now strings doesn't get the <i> element with his correspondent class. Any help would be thanked.

[harsh yoke]

this will be needed as a ref i think

Strings should have a green color

[sleek spoke]

https://www.regexr.com/7rldr

https://codepen.io/thefacebiters/pen/LYaBJzZ

Basically I modified your regex to handle escaped characters and consecutive backslashes in strings. You definetly were on the path to completion though.

[harsh yoke]

this regex works i think @sleek spoke

but the problem is about class keyword

it bugs everything

[sleek spoke]

oh damn

I thought you needed your strings worked out

my bad, lms

[harsh yoke]

const str = /(?:(?<=[class])).(['"`])(?:\.|(?:\\)?[^\]|(?!\1)[\s\S])?\1/g;

something like this would work

but yeah, still need hel

[harsh yoke]

no worries

[sleek spoke]

'\bclass\s+\w+\b'

Putting the most powerful version I come up with here until I fix it 100%

[harsh yoke]

the problem looks like this

class is being taked

as part of the string

so it bugs all

[sleek spoke]

' const classRegex = /\bclass\s+(\w+)\b/g;'

[harsh yoke]

where should i apply this

[sleek spoke]

'\bclass\s*=\s*(['"])(.?)\1|\bclass\s=\s*(\S+)|\bclass\s+\w+\b' boom

I have it setup like this

  const strRegex = /(['"`])(?:\\.|(?:\\\\)*?[^\\]|(?!\1)[\s\S])*?\1/g;
  const classRegex = /\bclass\s+(\w+)\b/g;

but

const classRegex = /\bclass\s*=\s*(['"])(.?)\1|\bclass\s=\s*(\S+)|\bclass\s+\w+\b/g; like dat

I'm trying to get it to highlight right in my little codepen but: https://www.regexr.com/7rlhg

you'll see it matches proper

Oh I'm dumb

[sleek spoke]

Super dumb.

https://codepen.io/thefacebiters/pen/LYaBJzZ

Okay, I was over complicating things as usual.

(╯°□°)╯︵ ┻━┻

https://regexr.com/7rlhg
\bclass\s*=\s*(['"])(.?)\1|\bclass\s=\s*(\S+)|\bclass\s+\w+\b
https://regexr.com/7rldr
(['"`])(?:\.|(?:\\)?[^\]|(?!\1)[\s\S])?\1

Okay, so instead of directly modifying the code text with highlighted segments, I just replaced the strings and classes with placeholders so it preserves their original positions, I was loosing my mind up in here.

[warm meadow]

KEEP CALM DYLAN

ITS GONNA BE OK

I can't help at all, just wanted to say that xoxo

[harsh yoke]

ok let's try @sleek spoke

Working but the class="str" doesn't work now XD

looking like this

did some changes also

woah

solved it XD

well

a bit

strings highlight

i think

by modifying kw regexp

i can solve the matter