Pattern matching to exclude a subdirectory

Question

Pattern matching to exclude a subdirectory

I'm currently working on setting up automatic global registration. I'm encountering difficulty in finding a way to exclude a specific sub directory. Can someone provide an example of a regex pattern for excluding a particular directory? Unfortunately, I don't have any attempts to show as I am unsure where to start. I tried searching online and found some examples, but none of them seem to match the requirement of excluding only a directory.

Below is the code snippet that I am using to get the components:

const registerComponents = () => {
  const pascalCase = (name: string) => {
    return _.chain(name).camelCase().upperFirst().value()
  }

  const context = require.context('@/components', true, /\w+\.(vue)$/)
  _.forEach(context.keys(), fileName => {
    const componentConfig = context(fileName)

    const name = (fileName.split('/').pop() || '').replace(/\.\w+$/, '')
    const componentName = pascalCase(name)

    Vue.component(componentName, componentConfig.default || componentConfig)
  })
}

This is how the structure looks like. I want to exclude the folder /_exclude/

components/_exclude/file.vue
components/_exclude/file2.vue
components/_exclude/svg/globe.vue
components/some-file.vue
components/svg/cart.vue

javascript regex vue.js

Answer 1

Answer №1

This regex pattern is designed to select all files with a .vue extension, excluding those located in the _exclude/ directory:

/^\.\/(?!_exclude\/).*\.vue$/

Detailed Explanation of the regex pattern:

`^\.\/`

This part of the pattern matches the initial ./ in file paths obtained from require.context().

`(?!_exclude\/)`

Using negative lookahead, this portion ensures that _exclude/ is not included in the match.

`.*`

Matches any character(s). It is worth noting that using \w+ as in your original pattern would have failed on file separators in the paths.

`\.vue$`

Matches the file extension .vue. The parentheses around (vue) in your original pattern would have created an unnecessary capture group.

Answer 2

This regex pattern is designed to select all files with a .vue extension, excluding those located in the _exclude/ directory:

/^\.\/(?!_exclude\/).*\.vue$/

Detailed Explanation of the regex pattern:

`^\.\/`

This part of the pattern matches the initial ./ in file paths obtained from require.context().

`(?!_exclude\/)`

Using negative lookahead, this portion ensures that _exclude/ is not included in the match.

`.*`

Matches any character(s). It is worth noting that using \w+ as in your original pattern would have failed on file separators in the paths.

`\.vue$`

Matches the file extension .vue. The parentheses around (vue) in your original pattern would have created an unnecessary capture group.

Answer 3

Answer №2

For your scenario, the solution is straightforward:

console.log( 'components/_exclude/file.vue'.replace(/\/_exclude\//,'/')  ); // <- RegEx
console.log( 'components/_exclude/file2.vue'.replace('/_exclude/','/') ); // <- String
console.log( 'components/_exclude/svg/globe.vue'.replace(/\/_exclude\//,'/') );
console.log( 'components/some-file.vue'.replace(/\/_exclude\//,'/') );
console.log( 'components/svg/cart.vue'.replace(/\/_exclude\//,'/') );

console.log( ' --- Or ---' );

console.log(
`components/_exclude/file.vue
components/_exclude/file2.vue
components/_exclude/svg/globe.vue
components/some-file.vue
components/svg/cart.vue`.replace(/\/_exclude\//g,'/') // <-- Using global flag (g) in case of more than one
);

We can also extract the component name using match:

console.log( 'components/_exclude/file.vue'.match(/(?!\/)[^/]*?(?=(?:\.[^/.]+?)?(?:[?#].*)?$)/)[0] );
console.log( 'components/folder/file.vue?query=notme.ext'.match(/(?!\/)[^/]*?(?=(?:\.[^/.]+?)?(?:[?#].*)?$)/)[0] );
console.log( 'components/folder.name/file.vue'.match(/(?!\/)[^/]*?(?=(?:\.[^/.]+?)?(?:[?#].*)?$)/)[0] );
console.log( 'components/folder/file.min.vue'.match(/(?!\/)[^/]*?(?=(?:\.[^/.]+?)?(?:[?#].*)?$)/)[0] );

Update

To handle the pathInfo data effectively, consider the following functions:

pathInfo function

function pathInfo(s) {
    s=s.match(/(.*?\/)?(([^/]*?)(\.[^/.]+?)?)(?:[?#].*)?$/);
    return {folders:s[1],file:s[2],filename:s[3],fileext:s[4]};
}
var sample='folder/myfolder/excludeme/another/excludeme/onemore/file.min.js?query=1';
var result=pathInfo(sample);
console.log(result);
/*
{
  "folders": "folder/myfolder/excludeme/another/excludeme/onemore/",
  "file": "file.min.js",
  "filename": "file.min",
  "fileext": ".js"
}
*/
console.log(result.folders.split('/').filter(a=>a!='excludeme').join('/')+result.file);
// folder/myfolder/another/onemore/file.min.js

pathInfo (+Folders list) function

function pathInfo(s) {
    s=s.match(/(.*?\/)?(([^/]*?)(\.[^/.]+?)?)(?:[?#].*)?$/);
    return {path:s[1],folders:s[1].split('/'),file:s[2],filename:s[3],fileext:s[4]};
}
var sample='folder/myfolder/excludeme/another/excludeme/onemore/file.min.js?query=1';
var result=pathInfo(sample);
console.log(result);
/*
{
  "path": "folder/myfolder/excludeme/another/excludeme/onemore/",
  "folders": [
    "folder",
    "myfolder",
    "excludeme",
    "another",
    "excludeme",
    "onemore",
    ""
  ],
  "file": "file.min.js",
  "filename": "file.min",
  "fileext": ".js"
}
*/
console.log(result.folders.filter(a=>a!='excludeme').join('/')+result.file);
// folder/myfolder/another/onemore/file.min.js

Answer 4

For your scenario, the solution is straightforward:

console.log( 'components/_exclude/file.vue'.replace(/\/_exclude\//,'/')  ); // <- RegEx
console.log( 'components/_exclude/file2.vue'.replace('/_exclude/','/') ); // <- String
console.log( 'components/_exclude/svg/globe.vue'.replace(/\/_exclude\//,'/') );
console.log( 'components/some-file.vue'.replace(/\/_exclude\//,'/') );
console.log( 'components/svg/cart.vue'.replace(/\/_exclude\//,'/') );

console.log( ' --- Or ---' );

console.log(
`components/_exclude/file.vue
components/_exclude/file2.vue
components/_exclude/svg/globe.vue
components/some-file.vue
components/svg/cart.vue`.replace(/\/_exclude\//g,'/') // <-- Using global flag (g) in case of more than one
);

We can also extract the component name using match:

console.log( 'components/_exclude/file.vue'.match(/(?!\/)[^/]*?(?=(?:\.[^/.]+?)?(?:[?#].*)?$)/)[0] );
console.log( 'components/folder/file.vue?query=notme.ext'.match(/(?!\/)[^/]*?(?=(?:\.[^/.]+?)?(?:[?#].*)?$)/)[0] );
console.log( 'components/folder.name/file.vue'.match(/(?!\/)[^/]*?(?=(?:\.[^/.]+?)?(?:[?#].*)?$)/)[0] );
console.log( 'components/folder/file.min.vue'.match(/(?!\/)[^/]*?(?=(?:\.[^/.]+?)?(?:[?#].*)?$)/)[0] );

Update

To handle the pathInfo data effectively, consider the following functions:

pathInfo function

function pathInfo(s) {
    s=s.match(/(.*?\/)?(([^/]*?)(\.[^/.]+?)?)(?:[?#].*)?$/);
    return {folders:s[1],file:s[2],filename:s[3],fileext:s[4]};
}
var sample='folder/myfolder/excludeme/another/excludeme/onemore/file.min.js?query=1';
var result=pathInfo(sample);
console.log(result);
/*
{
  "folders": "folder/myfolder/excludeme/another/excludeme/onemore/",
  "file": "file.min.js",
  "filename": "file.min",
  "fileext": ".js"
}
*/
console.log(result.folders.split('/').filter(a=>a!='excludeme').join('/')+result.file);
// folder/myfolder/another/onemore/file.min.js

pathInfo (+Folders list) function

function pathInfo(s) {
    s=s.match(/(.*?\/)?(([^/]*?)(\.[^/.]+?)?)(?:[?#].*)?$/);
    return {path:s[1],folders:s[1].split('/'),file:s[2],filename:s[3],fileext:s[4]};
}
var sample='folder/myfolder/excludeme/another/excludeme/onemore/file.min.js?query=1';
var result=pathInfo(sample);
console.log(result);
/*
{
  "path": "folder/myfolder/excludeme/another/excludeme/onemore/",
  "folders": [
    "folder",
    "myfolder",
    "excludeme",
    "another",
    "excludeme",
    "onemore",
    ""
  ],
  "file": "file.min.js",
  "filename": "file.min",
  "fileext": ".js"
}
*/
console.log(result.folders.filter(a=>a!='excludeme').join('/')+result.file);
// folder/myfolder/another/onemore/file.min.js

Pattern matching to exclude a subdirectory

Answer №1

Detailed Explanation of the regex pattern:

`^\.\/`

`(?!_exclude\/)`

`.*`

`\.vue$`

Answer №2

Update

pathInfo function

pathInfo (+Folders list) function

Similar questions

importing files from Uploadcare using ngCordova MediaFile

The feature of window.open and pop-up blocker integrated into the $.ajax().done() function is

Simultaneously updating pages and states with Vuex and Vue-router

Utilize ag-grid to pair key-value for efficient filtering

Why doesn't the Vuex store update the data property of Vue components?

Tips for managing several Material UI Slide Components at once

Google Analytics in Next.js Missing Page Title Configuration

Creating a Triangular Badge in Vuetify: A Step-by-Step Guide

Transferring data through Ajax, Jquery, and PHP: A seamless process

Steps to generating a dynamic fabric canvas upon opening a new window

Exciting discovery within my coding for US Number formatting!

Elements recognized worldwide, Typescript, and a glitch specific to Safari?

Updating language settings on-the-fly in a Vue application does not automatically refresh the translated content displayed on the website

Troubleshooting Bootstrap 3.0: Issues with nav-tabs not toggling

What could be the reason for the peculiar data being returned by Microsoft Graph list subscriptions?

Troubleshooting slow/delayed performance when using manual dataItem.set() in Kendo UI Grid

What is the process for converting primitive values in the expressions `1 + {}` and `{} + 1`?

Oops: Looks like there is already a request for 'PUBLIC_requestAccounts' pending from http://localhost:3000. Just hold tight for now

Troubleshooting problem in Java related to encoding with XMLHttpRequest

Modify the size of Points of Interest in Mapbox GL JS