Category: javascript

I’m working with a monorepo in which I want to create one folder containing all those little functions as well as components all the separate projects in that monorepo use.

I figured, the best way to do this would be creating a node module in the monorepo and having it export those common functions and components.

Now, when I try to use my exported component from that “common” sub-project, I get messages like this:

dispatcher is null
useState@http://localhost:3000/static/js/bundle.js:162692:7
$@http://localhost:3000/static/js/bundle.js:158032:34
renderWithHooks@http://localhost:3000/static/js/bundle.js:114086:31
...

I’ve created the following setup:

common/
  lib/
    components/
      Tooltip/
        index.tsx
    helpers/
      API.ts
      DATETIME.ts
      ...
  index.ts
  ...configs

index.ts

import Tooltip from './components/Tooltip';

export * from './helpers/API';
export * from './helpers/DATETIME';
...

export const COMP = {
  Tooltip: Tooltip
  ...
}

Note: the wrapping into that const object is to facilitate organization as this library will grow.

Tooltip/index.jsx

import {FC, ReactElement, cloneElement, useState} from 'react';

export interface ITooltipProps {
  children: ReactElement<any, string>,
  anchor: ReactElement<any, string>
}

const Tooltip: FC<ITooltipProps> = (props: ITooltipProps) => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div className='tooltip-wrapper' style={{
      position: 'relative',
      display: 'inline-block'
    }}
      onClick={() => setIsOpen(true)}
      onMouseOver={() => setIsOpen(true)}
      onMouseLeave={() => setIsOpen(false)}
    >
      {cloneElement(props.anchor, {className: 'tooltip-anchor'})}
      <div style={{
        visibility: isOpen ? 'visible' : 'hidden',
        zIndex: 10,
        top: '100%',
        left: '50%',
        opacity: isOpen ? 1 : 0,
        transition: 'all ease-in-out 0.3s'
      }}>
        {props.children}
      </div>
    </div>
  )
}

export default Tooltip;

Note: I know this “tooltip” is incredibly stupid right now but it just serves as a placeholder to figure out this components-in-separate-package issue.

package.json

...
  "main": "dist/index.js",
  "directories": {
    "lib": "lib"
  },
  "scripts": {
    "build": "tsup",
    "ladle": "ladle serve --stories=lib/components/**/*.stories.tsx"
  },
  "devDependencies": {
    "@ladle/react": "^4.0.2",
    "@types/react": "^18.2.63",
    "tsup": "^8.0.2",
    "typescript": "^5.3.3"
  },
  "dependencies": {
    "buffer": "^6.0.3"
  },
  "peerDependencies": {
    "buffer": "^6.0.3",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }

tsconfig.json

{
  "compilerOptions": {
    "target": "es2017",
    "module": "esnext",
    "lib": [ "esnext", "dom" ],
    "jsx": "react-jsx",
    "sourceMap": true,
    "moduleResolution": "node",
    "preserveConstEnums": true,
    "outDir": "./dist",
    "strict": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true,
    "declaration": true
  }
}

tsup.config.json

{
  "splitting": true,
  "sourcemap": true,
  "clean": true,
  "minify": true,
  "dts": true,
  "entry": [
    "lib/index.ts"
  ]
}

In the other projects in this same repo, this “common”-package is added to dependencies as "common": "file:../common-js".

I have an xml payload

   <myXML>
      <ctx>
       <recipient>
          <age>16</age>
          <height>180</height>          
       </recipient>
      </ctx>
   </myXML>


  var xmlDoc = DOMDocument.fromXMLString(message).getElementsByTagName("myXML")[0].toXMLString();

which basically outputs starting from the ctx node.

I want to add a new node/element at a specific location using the insertBefore, but it isnt working for me, whas the correct method?

ref – https://experienceleague.adobe.com/developer/campaign-api/api/m-DOMNode-insertBefore.html

  xmlDoc.insertBefore("<email>[email protected]</email>","<CardNumber>");

do I have to create the element? how do I insert it at a specific location? using insertBefore

  var email = xmlDoc.createElement("email");
      email.textContent = "[email protected]";
      email.appendChild(ctx)

I am doing a small project to retrieve some search results by using Apache Solr instances. In my client-side application, I am using solr-node to interact with Solr from Node.js. The code is as follows:

const express = require('express');
const bodyParser = require('body-parser');
const app = express();

app.set('view engine', 'ejs');
app.use(bodyParser.urlencoded({extended: true}));

// add Apache Solr and integrate it with node.js
const SolrNode = require('solr-node');

const client = new SolrNode({
  host:'localhost',
  port:'8983',
  core:'mycollection',
  protocol:'http'
});


app.get('/search', (req, res) => {

  const strNewQuery = client.query()
  .q('text: searchkeyword')
  .addParams({
    wt: 'json',
    indent: true
  });


  client.search(strNewQuery, (err, result) => {

    if (err) {
              console.error('Error querying Solr:', err);
              res.status(500).send('Error querying Solr');
              res.redirect('/');
    } else {
          //    res.json(result.response.docs);
              console.log('Response: ', result.response);
              console.log('node.js fetching is successful!');
 
              const formattedResults = result.response.docs.map((doc) => ( {
                id: doc.id,
                titile: doc.filename
              }));

              res.render("list", {listTitle: "Probe Search Result", newListItems: formattedResults});

    }
  });
  

});

app.get("/about", function(req, res) {
  res.render("about");
});

app.use(express.static(__dirname + '/public'));

// Start the Server
const port = 3030;

app.listen(port, ()=> {
  console.log('Solr-node server listening on port: ' + port);
});

Here, I hardcode my search key word as variable, strNewQuery so that if I run the url, “http”//localhost:3030/search”, the response results from my Apache Solr instance will be displayed in the webpage. I use list.ejs to display my results. The solr-node works very well with my own solr collection and I compared my solr-node results with Solr Admin results. They look good.
However, hardcoded search word is just a mockup test, not my target. How can I pass my query search keyword from the HTML input form to my solr-node server from my client-side program? To resolve this, I did the following codes:

//filename: clientSolr.js, given in the <script> part in HTML
  const solr = require('solr-client');      

  // create a Solr client
  const client = solr.createClient({
    host: 'localhost',
    port: 8983,
    core: 'mycollection',
    protocol: 'http'
  });

  //Handle form submission
  document.getElementById('searchForm').addEventListener('submit', async (e) => {
    e.preventDefault();
    const query = document.getElementById('queryInput').value;

    try {
      // Execute Solr query
      const response = await client.search(query, { wt: 'json' }); // Specify JSON response format
      const docs = response.response.docs; // Extract search results

      const formattedResults = result.response.docs.map((doc) => ( {
            id: doc.id,
            titile: doc.filename
          }));

      formattedResults.forEach((formatResult) => {
            console.log('result id: ', formatResult.id);
            console.log('result filename: ', formatResult.filename);
          });

      // Display results
      const resultsDiv = document.getElementById('results');
      resultsDiv.innerHTML = ''; // Clear previous results
      docs.forEach((doc) => {
        resultsDiv.innerHTML += `<p>${doc.id}</p>`; // Display relevant data (adjust as needed)
      });
    }
    catch (error)
    {
        console.error('Error fetching Solr data:', error);
    }
 });

//  }

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Search Solr client Page</title>
  </head>
  <body>
    <form id="searchForm">
        <input type="text" id="queryInput" placeholder="Enter your search query">
        <button type="submit">Search</button>
    </form>
    <div id="results"></div>

    <script type="text/javascript" src="clientSolr.js">
    
    </script>

  </body>
</html>

Here, I use solr-client library in my client-side javascript and retrieve the query keyword by identifying the element id from my HTML. But these codes didn’t work. I knew I can not use global variable, document, to retrieve the elementId in the node.js code because backend side does not recognize the document. My question is how can I pass query search keywords in solr-node program even though node.js DOES NOT recognize the global variable, document. I knew the differences between solr-client and solr-node but it seems that both are not able to handle the query search keyword from HTML input form. How can I resolve this?

I’m trying to archive the photos that I request to insert from a form using vue, which then interfaces with a firestore repository to save the image and with a firebase db for the rest of the data, on the db I also save the path created by getDonwloadPath . Despite this I still can’t see the images.
save to firestore,(https://i.stack.imgur.com/THVfW.png)
form
get image

<q-table
      style="height: 400px"
      flat
      bordered
      grid
      grid-header
      card-container-class="q-pa-md row justify-center table_card "
      title="Negozzio"
      :columns="columns"
      :rows="filteredRows"
      row-key="id"
      virtual-scroll
      v-model:pagination="pagination"
      :rows-per-page-options="[4]"
    >
      <template v-slot:item="props">
        <div class="col-xs-12 col-sm-6 col-md-4 table_card">
          <q-card flat bordered>
            <img :src="props.row.image" width="100px" height="200px" />

            <q-card-section>
              <div class="text-overline text-orange-9">
                {{ props.row.overline }}
              </div>
              <div class="text-h5 q-mt-sm q-mb-xs">{{ props.row.name }}</div>
              <q-separator />
              <div class="text-caption text-grey">
                {{ props.row.description }}
              </div>
            </q-card-section>

            <q-card-actions>
              <q-btn
                flat
                color="primary"
                label="Add to cart"
                @click="addToCart(props.row)"
              />
              <q-btn flat color="secondary" @click="addFavorite(props.row)" label="favorite" :class="{ 'is-favorite': isFavorite }"/>
              <q-space />

const rows = ref([]);

try {
  $q.loading.show({ message: "Loading ..." });
  (async () => {
    rows.value = await getAll("productsList")
  })();
  console.log(rows.value );
  $q.loading.hide();
} catch (e) {
  triggerNegative($q.notify, e?.message);
}

result

Get widget with foto, name, description, uid ecc

I have a Vuejs, Vuex, Firebase app using Firestore and need to support multiple databases to localize client data storage to their own country. What is the most efficient and concise way to dynamically switch between databases, so that one app/codebase can service all client locations.

firebase.js

import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
    FIREBASE_CONFIGURATION
};

const app = initializeApp(firebaseConfig);

const dbcanada = getFirestore(app, "canada");
const dbunitedstates = getFirestore(app, "unitedstates");

export { dbcanada, dbunitedstates }

program.js

import { dbcanada } from "@/firebase";
import { dbunitedstates } from "@/firebase";
const actions = {

  async loadProgramsCanada() {
    const querySnapshot = await getDocs(collection(dbcanada, "programs"));
    querySnapshot.forEach((doc) => {
      console.log(doc.id, " => ", doc.data());
    });
  },

  async loadProgramsUnitedStates() {
    const querySnapshot = await getDocs(collection(dbunitedstates, "programs"));
    querySnapshot.forEach((doc) => {
      console.log(doc.id, " => ", doc.data());
    });
  },

}

My example above has 2 vuex actions, one for each region. I wish to condense this to be a single action that dynamically switches database. I thought about storing the db reference in a getter and applying it as a variable to the getDocs method, but Firebase does not permit this and returns an error. I’m keen to see what other approach would be the best way to handle this.

The single action example below, does not work as Firebase does not allow variables to be passed as the db

async loadProgramsDynamically() {
    var database = "dbunitedstates";
    const querySnapshot = await getDocs(collection(database, "programs"));
    querySnapshot.forEach((doc) => {
      console.log(doc.id, " => ", doc.data());
    });
  },

I’m working on a function that takes a number of variable precision and returns a string representation while keeping the decimal in place.

For example, 500 will be converted to ‘500’, while 500.0 will be converted to ‘500.0’, 500.00 to ‘500.00’, and so on.

I have tried using methods like .toString(), Number.toString(), .toFixed() to no avail.

Any help will be appreciated.

I’m using fullCalendar and it use work fine except recently and maybe its updated to new version which I don’t know.
so the issue I’m having is start/end date is off.
so I fixed the start date off by 1 day by adding timeZone: ‘UTC’

and end date still have one day short and I debug and it looks like its getting the correct data from the server but when it renders its getting one day short.
for an example:

my end date ends March 8 but in the calendar showing March 7

I looked at this existing solution but could not find the answer:
FullCalendar End Date Off By One
Fullcalendar show “end date” one day off

when I debug this is the data I’m getting which is correct:

{
    "id": "SDFDS23",
    "editable": true,
    "startEditable": true,
    "durationEditable": true,
    "start": "2024-03-04T00:00:00.000Z",
    "end": "2024-03-08T00:00:00.000Z",
    "allDay": true,
    "title": "test",
     
}

here is my code:

this.calendar = new FullCalendar.Calendar(ele, {
        plugins: [ 'interaction', 'dayGrid', 'timeGrid', 'list' ],
        defaultView: 'dayGridMonth',
        timeZone: 'UTC',
        navLinks: true,  
        editable: true,
        droppable: true,  
        selectable: this.selectable,
        selectMirror: true,
        eventLimit: true,  
        eventDurationEditable: true,
        eventStartEditable: true,
        eventResizableFromStart: true,
        slotDuration: "00:30:00",
        snapDuration: "00:30:00",
        defaultTimedEventDuration: "01:00:00" ,
        footerToolbar: true,
        nowIndicator: true,
        now: new Date(),
        eventTimeFormat: {
          hour: '2-digit',
          minute: '2-digit',
          meridiem: true
        },

read all the documentation and search the stackoverflow but could not find any answer

1. Create react app using the create-react-app tool
   https://github.com/facebook/create-react-app#quick-overview
2. Commit the code, create GitHub repo using GitHub CLI
3. Switch branch to “update_logo”
4. Replace existing logo with https://www.propelleraero.com/wp-
   content/uploads/2021/05/Vector.svg
5. Replace existing link with https://www.propelleraero.com/dirtmate/
6. Commit, then push the code
7. Create PR from “update_logo” to “master” branch using GitHub CLI
8. Merge the PR using GitHub CLI (ideally another engineer has to approve the PR
   before merging, but we will skip the approval step because we cannot approve our
   own PR)
   9. List all commands you used in steps 1-8 on “command.sh” file

Here is the setup:

• IIS website using PHP to handle session and auth as well as connection to mysql DB hosted hosted on same server.

• HTML5/CSS3/JS front-end.

Fairly standard so far, right? Here is where it is a little different:

• I also host a flask app on this server to handle api requests, which works like a dream on its own and is even being served behind a reverse proxy via IIS.

The goal:

To alert all logged-in and privileged users (based on php session vars) on the IIS site live in-browser (like push notification) that a flask endpoint such as my.website.com:apiport/flaskapp/endpont
is hit with an http request.

I am not looking to rewrite the backend if possible.

Is this realistically achieved? Can anyone point me to some examples or push me in the right direction with some suggestions? Thank you all.

I am looking for information and suggestions. I have tried to look up this setup, but it is uncommon an complex.

the fastest way how to separate these js file and take japanese words inside JS form using ms excel.

I want to get the Japanese writing and delete the other writing and make it one sentence in excel, and then copied it into txt file, but the fastest and most possible way.

i also using Data–>Text to column –> delimited. but its too take long time.

{
  "wireMagic": "pb3",
  "pens": [ {
  
  } ],
  "wsWinStyles": [ {
  
  }, {
    "mhModeHint": 2,
    "juJustifCode": 0,
    "sdScrollDir": 3
  } ],
  "wpWinPositions": [ {
  
  }, {
    "apPoint": 6,
    "ahHorPos": 20,
    "avVerPos": 100,
    "rcRows": 2,
    "ccCols": 40
  } ],
  "events": [ {
    "tStartMs": 0,
    "dDurationMs": 2568980,
    "id": 1,
    "wpWinPosId": 1,
    "wsWinStyleId": 1
  }, {
    "tStartMs": 1380,
    "dDurationMs": 4579,
    "wWinId": 1,
    "segs": [ {
      "utf8": "ゆうゆう",
      "acAsrConf": 236
    }, {
      "utf8": "の日本",
      "tOffsetMs": 900,
      "acAsrConf": 236
    }, {
      "utf8": "語",
      "tOffsetMs": 1680,
      "acAsrConf": 236
    }, {
      "utf8": "ポッド",
      "tOffsetMs": 2100,
      "acAsrConf": 236
    }, {
      "utf8": "キャスト",
      "tOffsetMs": 2460,
      "acAsrConf": 234
    } ]
  }, {
    "tStartMs": 6110,
    "wWinId": 1,
    "aAppend": 1,
    "segs": [ {
      "utf8": "n"
    } ]
  }, {
    "tStartMs": 6120,
    "dDurationMs": 4559,
    "wWinId": 1,
    "segs": [ {
      "utf8": "はい",
      "acAsrConf": 236
    }, {
      "utf8": "みな",
      "tOffsetMs": 480,
      "acAsrConf": 236
    }, {
      "utf8": "さん",
      "tOffsetMs": 659,
      "acAsrConf": 236
    }, {
      "utf8": "こんにちは",
      "tOffsetMs": 779,
      "acAsrConf": 236
    }, {
      "utf8": "ゆう",
      "tOffsetMs": 960,
      "acAsrConf": 236
    }, {
      "utf8": "の",
      "tOffsetMs": 1679,
      "acAsrConf": 236
    }, {
      "utf8": "日本",
      "tOffsetMs": 1920,
      "acAsrConf": 236
    }, {
      "utf8": "語",
      "tOffsetMs": 2280,
      "acAsrConf": 236
    } ]
  }

the fastest way seperate and get japanese writing using ms excel

I have this table and I need to read by javascript then submit to be read by php

this table has post 4 columns (post type, post status(published, pending, draft))

<table class="table-style" id="myTable">
    <thead>
        <tr>
            <th style="text-align: center;" rowspan="2">Post Type</th>
            <th style="text-align: center;" colspan="3">Show/Hide admin bar by the post status</th>
        </tr>
        <tr>
            <th style="text-align: center;">Published</th>
            <th style="text-align: center;">Pending For Review</th>
            <th style="text-align: center;">Draft</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                post </td>
            <td align="center">
                <label class="toggle-switchy" data-size="sm">
                    <input type="checkbox" checked="" wfd-value="b24=">
                    <span class="toggle">
                        <span class="switch"></span>
                    </span>
                </label>
            </td>
            <td align="center">
                <label class="toggle-switchy" data-size="sm">
                    <input type="checkbox" checked="" wfd-value="b24=">
                    <span class="toggle">
                        <span class="switch"></span>
                    </span>
                </label>
            </td>
            <td align="center">
                <label class="toggle-switchy" data-size="sm">
                    <input type="checkbox" checked="" wfd-value="b24=">
                    <span class="toggle">
                        <span class="switch"></span>
                    </span>
                </label>
            </td>
        </tr>
        <tr>
            <td>
                page </td>
            <td align="center">
                <label class="toggle-switchy" data-size="sm">
                    <input type="checkbox" checked="" wfd-value="b24=">
                    <span class="toggle">
                        <span class="switch"></span>
                    </span>
                </label>
            </td>
            <td>
            </td>
            <td align="center">
                <label class="toggle-switchy" data-size="sm">
                    <input type="checkbox" checked="" wfd-value="b24=">
                    <span class="toggle">
                        <span class="switch"></span>
                    </span>
                </label>
            </td>
        </tr>
        <tr>
            <td>
                attachment </td>
            <td align="center">
                <label class="toggle-switchy" data-size="sm">
                    <input type="checkbox" wfd-value="b24=">
                    <span class="toggle">
                        <span class="switch"></span>
                    </span>
                </label>
            </td>
            <td>
            </td>
            <td>
            </td>
        </tr>
    </tbody>
</table>

I need to submit array that each row in one single as this :

Array
(
    [post_type] => page
    [publish] => 1
    [pending] => 0
    [draft] => 0
)

when the table had two columns (post_type and its toggle) I used this code to get the data perfectly :

function readValuesAndStates() {
    // Here to read a list values to be combined in the same array
    var list = document.getElementById("myTable");
    var items = list.getElementsByTagName("tr");
    var values = [];

    for (var i = 0; i < items.length; i++) {
        values.push(items[i].getAttribute("value"));
    }

    // Read checkbox states
    var checkboxes = document.querySelectorAll("#myTable input[type='checkbox']");
    var states = [];

    for (var i = 0; i < checkboxes.length; i++) {
        var checkbox = checkboxes[i];
        var label = checkbox.parentNode.parentNode.previousElementSibling.textContent.trim();
        var state = checkbox.checked;
        states.push({
            label: label,
            state: state
        });
    }

    // Combine the values and states into one array
    var combined = [values, states];

    // Create a form and append the values and states
    var form = document.createElement("form");
    form.method = "POST";

    for (var i = 0; i < combined[0].length; i++) {
        var hiddenFieldValue = document.createElement("input");
        hiddenFieldValue.type = "hidden";
        hiddenFieldValue.name = "value" + i;
        hiddenFieldValue.value = combined[0][i];
        form.appendChild(hiddenFieldValue);
    }

    for (var i = 0; i < combined[1].length; i++) {
        var hiddenFieldLabel = document.createElement("input");
        hiddenFieldLabel.type = "hidden";
        hiddenFieldLabel.name = "label" + i;
        hiddenFieldLabel.value = combined[1][i].label;
        form.appendChild(hiddenFieldLabel);

        var hiddenFieldState = document.createElement("input");
        hiddenFieldState.type = "hidden";
        hiddenFieldState.name = "state" + i;
        hiddenFieldState.value = combined[1][i].state;
        form.appendChild(hiddenFieldState);
    }

    document.body.appendChild(form); // Append the form to the body
    form.submit();

    return combined;
}

but now I have a table with 4 columns and can’t get the row data anymore

the row may has one toggle or more.

I don’t wanna get the checkbox for the entire table to be saved in one array

I need to get the rows arrays whether they have one toggle or more

please help me to do that.

I have a navbar and i am trying to add an overlay color when the hamburger toggle is selected.
The overlay class is outside of the nav when the hamburger select box is selected.
However, am not able to create a full page overlay when the hamburger check box is selected. Seems the overlay css styling cannot be accessed by the input checkbox because it is outside of the navbar. Would appreciate any suggestions on how to style an element outside of input select box such as a hamburger.

HTML:
<div class="overlay"></div><!--this should produce overlay over entire page when the toggler is selected-->


<div class="navbar">
   

<!--toggle-->
  <input type="checkbox" class="openSidebarMenu" id="openSidebarMenu">
  <label for="openSidebarMenu" class="sidebarIconToggle"  >
    <div class="spinner diagonal part-1"></div>
    <div class="spinner horizontal"></div>
    <div class="spinner diagonal part-2"></div>
  </label>

  <div id="sidebarMenu" class="sidebar">
    <ul class="sidebarMenuInner">
      <li><a href="https://vanila.io" target="_blank">Company</a></li>
      <li><a href="https://instagram.com/plavookac" target="_blank">Instagram</a></li>
      <li><a href="https://twitter.com/plavookac" target="_blank">Twitter</a></li>
      <li><a href="https://www.youtube.com/channel/UCDfZM0IK6RBgud8HYGFXAJg" target="_blank">YouTube</a></li>
      <li><a href="https://www.linkedin.com/in/plavookac/" target="_blank">Linkedin</a></li>
    </ul>
  </div>

</div>

CSS:
input[type=checkbox]:checked ~ .overlay{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color:green;
  z-index:10000;
}

I have a button where I can click and a div will appear in next to the button.
This is working in IE but when I try it in Chrome then the div appears in the upper left corner of the page.

How can I make it so that, in Chrome, the div will appear near the button as it does in IE?

document.write("<div id=the_div>DivContents</div>");
var thediv = document.getElementById("the_div");

function positionTheDiv(){
        posStartTop = event.y+document.body.scrollTop+10;
        posStartLeft = event.x+document.body.scrollLeft+10;

        if(event.y>document.body.scrollHeight-document.body.scrollTop-175)
            posStartTop = document.body.scrollHeight-175;
        if(event.x>document.body.scrollWidth-document.body.scrollLeft-175)
            posStartLeft = document.body.scrollWidth-175;

    thediv.style.position = "absolute";
    thediv.style.top = posStartTop+'px';
    thediv.style.left = posStartLeft+'px';
}

I would like your help to add 12-character regex in this specific place.
this is an example I want to recognise “site.com/news/5560df12b088/cascade1”

function extractUrl() {
  return window.location.href;
}
 function Match() {
  const url = extractUrl();
  return url.includes("/news|/juegos");
}
function Regex() {
  const url = extractUrl();
  return url.includes('REGEX.HERE');  //**here would be the place**
}
function redirectTMO() {
  if (Regex && !Match()) {
    window.history.forward();
  }
}

i’ve been trying to understand regex and it’s not quite clear to me. i have examples from various sources but i still don’t understand them.
this was one example and I don’t know how to adapt "/"/"/"/"/[0-9a-f]{12}/(cascade|paginated(?:/"0,3})?)$/gm;"

If someone could help me I would appreciate it

PS: This segment belongs to a script I’ve been working on for a while. It redirects one URL to another for convenience and to make life easier.
Is This Script

that someone can help me to solve my problem in an easy way and can provide me with a place to continue learning.

I am using the Stripe Payment Element in my react app. How can I remove the labels above the inputs:

Using the appearance API I have tried these rules:

'.Label': {
display: 'none',
visibility: 'hidden',
},
'.Label--empty': {
display: 'none',
visibility: 'hidden',
},