How to add variables to regex to match

Question

I want to do a secondary filtering when the template is rendered as a static HTML file.

How to match whether the textNode in the a label is equal to the variable. If it is equal, the entire a label will be removed.

<a class="tags-cloud-link" href="/tags/common/" rel="tag">mathjax test<span class="tags-cloud-count">1</span></a>
<a class="tags-cloud-link" href="/tags/markdown/" rel="tag">markdown<span class="tags-cloud-count">1</span></a>
<a class="tags-cloud-link" href="/tags/mathjax-test/" rel="tag">common<span class="tags-cloud-count">1</span></a>

If my variable is mathjax test, the result of match replacement should be

<a class="tags-cloud-link" href="/tags/markdown/" rel="tag">markdown<span class="tags-cloud-count">1</span></a>
<a class="tags-cloud-link" href="/tags/mathjax-test/" rel="tag">common<span class="tags-cloud-count">1</span></a>

let htmlText = `<a class="tags-cloud-link" href="/tags/common/" rel="tag">mathjax test<span class="tags-cloud-count">1</span></a><a class="tags-cloud-link" href="/tags/markdown/" rel="tag">markdown<span class="tags-cloud-count">1</span></a><a class="tags-cloud-link" href="/tags/mathjax-test/" rel="tag">common<span class="tags-cloud-count">1</span></a>`;

let $2 = 'mathjax test';
//let $2 = 'markdown';
//let $2 = 'common'

if (/<a class="tags-cloud-link"(.*?)> {How to use variables $2 = mathjax test} <span(.*?)>(.*?)<\/span><\/a>/gi.test(htmlText)) {
  console.log('new htmlText');
  //`<a class="tags-cloud-link" href="/tags/markdown/" rel="tag">markdown<span class="tags-cloud-count">1</span></a><a class="tags-cloud-link" href="/tags/mathjax-test/" rel="tag">common<span class="tags-cloud-count">1</span></a>`
}

[You can't parse HTML with regex](https://stackoverflow.com/a/1732454/6567275). So what exactly is the task at hand? Instead of parsing the markup and removing something, can you prevent the line to be added in the first place? (based on some condition) — Thomas, Apr 15 '21 at 21:27

score 1 · Answer 1 · answered Apr 15 '21 at 17:55

You can accomplish this with a <template> element:

var html = `<a class="tags-cloud-link" href="/tags/common/" rel="tag">mathjax test<span class="tags-cloud-count">1</span></a>
<a class="tags-cloud-link" href="/tags/markdown/" rel="tag">markdown<span class="tags-cloud-count">1</span></a>
<a class="tags-cloud-link" href="/tags/mathjax-test/" rel="tag">common<span class="tags-cloud-count">1</span></a>`
var myVar = "mathjax test";

var template = document.createElement("template");
template.innerHTML = html.trim();
var elems = template.content.children;
Array.from(elems).forEach(el => {
  var nodes = el.childNodes;
  nodes.forEach(node => {
    // text nodes are of type 3
    if(node.nodeType == 3) {
      if(node.textContent == myVar) {
        // remove your element
        console.log("Element should be removed");
      }
    }
  });
});

Sorry, I forgot to add that replacement is the process of rendering files, not running in the browser — Purple awn, Apr 15 '21 at 18:03

score 0 · Answer 2 · answered Apr 15 '21 at 17:51

0

Solution to your answer is to use #id. I attempted onClick with jQuery to check the id of event target, and if it matches mathjax_test, then it should be removed. here is the snippet in jsfiddle:

$(document).ready(function(){
    $(".tags-cloud-link").click(function(e){
    if(e.target.id === 'mathjax_test'){
        $(".tags-cloud-link#mathjax_test").remove();
    }
  });
});

jsfiddle

answered Apr 15 '21 at 17:51

Abdulmalik Alsufayran

11
3

Thank you for your reply. I need regular expressions to match – Purple awn Apr 15 '21 at 17:55
@Purpleawn using a regex for that kind of tasks is somewhere between a bad idea, highly unreliable up to straight out impossible. The way I see this question, I'd put it in the unreliable category. Where it will eventually break and you'd either have to fix it, or something will have changed so much that it ain't possible to fix anymore. – Thomas Apr 15 '21 at 21:24
@Thomas I use hexo static file generation, and the engine is node. Hexo has HTML file rendering filter processing, because the content generated by some hexo templates cannot be controlled, so the filter is needed to match and replace the HTML file – Purple awn Apr 16 '21 at 02:56

score 0 · Answer 3 · answered Apr 16 '21 at 07:18

let htmlText = `<a class="tags-cloud-link" href="/tags/mathjax-test/" rel="tag">mathjax test<span class="tags-cloud-count">1</span></a><a class="tags-cloud-link" href="/tags/markdown/" rel="tag">markdown<span class="tags-cloud-count">1</span></a><a class="tags-cloud-link" href="/tags/common/" rel="tag">common<span class="tags-cloud-count">1</span></a>`;

let text = 'mathjax test';
//let text = 'markdown';
//let text = 'common'

let reg = new RegExp(`<a class="(tags-cloud-link|categorys-cloud-link)" href="\/tags\/mathjax-test\/"(.*?)>${text}<span(.*?)>(.*?)<\/span><\/a>`, 'gi')

if (reg.test(htmlText)) {
  htmlText = htmlText.replace(reg, '');
  document.body.innerHTML = htmlText;
  console.log(htmlText);
}

score 0 · Answer 4 · answered Apr 16 '21 at 10:29

I use hexo static file generation, and the engine is node. Hexo has HTML file rendering filter processing, because the content generated by some hexo templates cannot be controlled, so the filter is needed to match and replace the HTML file

here an alternative idea in nodejs; check out jsdom:

const { JSDOM } = require("jsdom");

const doc = new JSDOM();
const document = doc.window.document;
document.body.innerHTML = yourMarkup;

for (let a of [...document.querySelectorAll("a.tags-cloud-link")]) {
  if (a.textContent.includes("mathjax test")) a.remove();
}

console.log(document.body.innerHTML);

As already mentioned, regular expressions sometimes work for some very limited applications to match something in html, but usually it's error prone, unreliable and sometimes even impossible.

Using a proper DOM to parse manipulate the html is imo. the better alternative.

How to add variables to regex to match

4 Answers4