CODEWITHSUNDEEP
javascriptregex
Yoojin Kim
Yoojin Kim

Reputation: 37

Javascript Regex to find all commas between two words

I am trying to find all commas between two words and replace them with another string in JS. I've tried literally every solution I've found but failed.

I have this HTML snippet (this is just a string looking like an html and not a real html document)

<style>
a,span{color:#29728D;text-decoration: underline;}
a:hover{ color:#69621C;text-decoration: underline;}
body, td{font-size:9pt; color:#333333}
</style>

<p>red, white, blue</p>

Now what I wanna do is replace those commas in the style tag with a random word such as "comma" or something.
But not replacing the commas in p or any other tags.

Closest I got was something like
(?<=(le>\w)*),+(?=\w|\W(<\/style>))

but did not work.

Any help would be appreciated.

Upvotes: 0

Views: 224

Answers (3)

I wrestled a bear once.
I wrestled a bear once.

Reputation: 23409

Here's a solution that uses pure string functions. No regex, no DOM parsing. This method will be more robust than using DOMParser() because it can safely handle broken HTML without errors and it will work outside of a browser if you need it to.

const document_body = `<style>
a,span{color:#29728D;text-decoration: underline;}
a:hover{ color:#69621C;text-decoration: underline;}
body, td{font-size:9pt; color:#333333}
</style>

<p>red, white, blue</p>`;


var parsed, modified = document_body, current_index = -1;
while ((parsed = getTagContent(modified, '<style>', '</style>', current_index)) !== false) {
  let tag_contents = modified.substring(parsed.start, parsed.end);
  let modified_tag_contents = tag_contents.replace(/,/g, 'COMMA');
  modified = modified.substring(0, parsed.start) + modified_tag_contents + modified.substring(parsed.end);
  current_index = parsed.end - (modified_tag_contents.length - tag_contents.length);
}

console.log("Original: "+document_body);
console.log("Modifided: "+modified);

function getTagContent(html_body, start_tag, end_tag, start_index = 0) {
  var start = html_body.indexOf(start_tag, start_index);
  if (start === -1) return false;
  var end = html_body.indexOf(end_tag, start);
  if (end === -1) return false;
  return {
    start: start + start_tag.length,
    end
  };
}

Upvotes: 0

Titus
Titus

Reputation: 22484

If I understand correctly, you're looking to modify the css selectors in that string. What you can do is parse the string as HTML, get the <style> element, modify its CSS rules (specifically the selectorText) and build a string from all the modified rules and set that as the new HTML content of the <style> element.

Here is an example:

const content = `<style>
a,span{color:#29728D;text-decoration: underline;}
a:hover{ color:#69621C;text-decoration: underline;}
body, td{font-size:9pt; color:#333333}
</style>

<p>red, white, blue</p>`

const doc = new DOMParser().parseFromString(content, 'text/html');
const style = doc.querySelector('style');

const result = [...style.sheet.cssRules]
  .reduce((acc, rule) => {
    rule.selectorText = rule.selectorText.replace(/\s*,\s*/g, ' comma ');
    acc += rule.cssText +'\n';
    return acc;
  }, '\n');


style.innerHTML = result;
const newContent = doc.head.innerHTML + '\n' + doc.body.innerHTML;

console.log(newContent);

Upvotes: 1

mplungjan
mplungjan

Reputation: 178421

If you use DOM access you can change the content

const snippet = `<style>
a,span{color:#29728D;text-decoration: underline;}
a:hover{ color:#69621C;text-decoration: underline;}
body, td{font-size:9pt; color:#333333}
</style>

<p>red, white, blue</p>`

const domSnippet = document.createElement("x");
domSnippet.innerHTML=snippet;
const st = domSnippet.querySelector("style").textContent;
domSnippet.querySelector("style").textContent = st.replace(/,/g,"£££")
console.log(domSnippet.innerHTML);
<style>
a,span{color:#29728D;text-decoration: underline;}
a:hover{ color:#69621C;text-decoration: underline;}
body, td{font-size:9pt; color:#333333}
</style>

<p>red, white, blue</p>

Upvotes: 1

Related Questions