const regex = /((((\b(#|\w)+\b\.)?(\bprototype\b\.)?(\b(#|\w)+\b)(\s*\=\s*)?)?(\b(#|\w)+\b\s*)\([\s\w,=]*\s*\))|(\bclass\b\s+\b\w+\b\s*(extends\s*\b\w+\b))(?=\s*\{[\s\S]+\}))(?=\s*\{[\s\S]+\})/gm;
// Alternative syntax using RegExp constructor
// const regex = new RegExp('((((\\b(#|\\w)+\\b\\.)?(\\bprototype\\b\\.)?(\\b(#|\\w)+\\b)(\\s*\\=\\s*)?)?(\\b(#|\\w)+\\b\\s*)\\([\\s\\w,=]*\\s*\\))|(\\bclass\\b\\s+\\b\\w+\\b\\s*(extends\\s*\\b\\w+\\b))(?=\\s*\\{[\\s\\S]+\\}))(?=\\s*\\{[\\s\\S]+\\})', 'gm')
const str = `/**
* Created by jetbrains web development IDE ( Web/PhpStorm ).
* Project: web-component - spineNav
* User: Pascal Gaudin
* Mail: pascal.gaudin@zimmerbiomet.com
* Date: 14/01/2023
* Time: 14:00
*/
/**
*
* @type {Window.HTMLElementExtd}
*/
window.HTMLElementExtd = class HTMLElementExtd extends HTMLElement {
shadowRoot;
style;
elementCustomName;
/**
*
* @param props
*/
constructor(props) {
super(props);
this.shadowRoot = this.attachShadow({mode: 'open'});
this.host=this.shadowRoot.host;
this.style= document.createElement('style');
this.elementCustomName = this.host.tagName.toLowerCase()
let css = Tools.fetchSync(\`web-component/\${this.elementCustomName}/default.css\`);
const iJson=new Css(css)
const jsonCss= iJson.toJson();
console.log('logg : ', jsonCss);
css += Tools.fetchSync(\`web-component/\${this.elementCustomName}/custom-element.css\`);
this.style.textContent = css;
this.shadowRoot.appendChild(this.style);
}
/**
*
* @param objVar
*/
setVarInCtx(objVar){
for(name in objVar ) this[name] = objVar[name];
}
/**
*
* @param className
* @returns {string}
*/
getStyle(className) {
var cssText = "";
var classes = document.styleSheets[0].rules || document.styleSheets[0].cssRules;
for (var x = 0; x < classes.length; x++) {
if (classes[x].selectorText == className) {
cssText += classes[x].cssText || classes[x].style.cssText;
}
}
return cssText;
}
/**
*
* @returns {boolean}
*/
get firstTime(){
return this.host.ownerDocument.getElementsByTagName(this.elementCustomName).length===1;
}
/**
*
* @returns {*[]}
*/
static get observedAttributes() {
return [];
}
/**
* document.adoptNode(el)
*/
adoptedCallback()
{
console.log(\`Custom-Element \${this.host.nodeName.toLowerCase()} adopt Node !\`);
}
/**
* each el.setAttribute
*
* @param attrName
* @param oldVal
* @param newVal
*/
attributeChangedCallback(attrName, oldVal, newVal){
console.log(\`Custom-Element \${this.host.nodeName.toLowerCase()} attribute '\${attrName}' Changed with value '\${newVal}' !\`);
}
/**
* el.remove()
*
*/
disconnectedCallback(){
console.log(\`Custom-Element \${this.host.nodeName.toLowerCase()} Element remove !\` );
}
/**
*
*/
connectedCallback(){
console.log(\`Custom-Element \${this.host.nodeName.toLowerCase()} was inserted in DOM!\`);
}
}
/**
* Created by jetbrains WebStorm .
* Project: web-component - MyProject
* User: Pascal Gaudin
* Mail:
* Date: 23/01/2023
* Time: 10:58
*/
/**
*
* @param attributes
*/
HTMLElement.prototype.setAttributes=function (attributes) {
for (const name in attributes) {
if(name=='textContent') this.textContent= attributes[name];
if(attributes[name]&&attributes[name]!=='')this.setAttribute(name,attributes[name]);
if( attributes[name]==='')this.setAttribute(name,'');
}
}
/**
*
* @returns {*[]}
*/
document.createElements =function (){
const args= [];
[...arguments].forEach((arg)=>{
args.push(document.createElement(arg));
})
return args;
}
/**
*
*/
document.toggleFullScreen=function() {
if (!document.fullscreenElement) {
document.documentElement.requestFullscreen();
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
}
}
}
/**
*
* @returns {*[]}
*/
HTMLElement.prototype.appendChilds =function ( ) {
const args= [];
[...arguments].forEach((arg)=>{
args.push(this.appendChild(arg));
})
return args;
}
/**
*
* @type {function(): *[]}
*/
ShadowRoot.prototype.appendChilds= HTMLElement.prototype.appendChilds ;
/**
*
* @returns {*[]}
*/
HTMLElement.prototype.removeChilds=function( ){
const args= [];
[...arguments].forEach((arg)=>{
args.push(this.removeChild(arg));
})
return args;
}
/**
*
* @param txt
*/
HTMLInputElement.prototype.setFocusBack =function( txt){
}
/**
*
* @param kill
*/
HTMLElement.prototype.disconnect=function(kill){
const numObserved = this.dataset.observed;
const infoElmt=\`of the element '\${this.tagName.toLowerCase()}' (with name:'\${this.getAttribute('name')??''}')\`
if(this.dataset.hasObserverConnected && this.observer[numObserved] ) {
this.observer[numObserved].disconnect();
console.log( \`The observer \${infoElmt} n° \${ numObserved } has been disconnected.\`);
if(kill) {
delete this.observer[numObserved] ;
console.log( \`The observer \${infoElmt} n° \${ numObserved } has been destroy.\`);
}
delete this.dataset.hasObserverConnected;
} else {
console.log( \`The observer \${infoElmt} is not connected.\`)
};
}
/**
*
* @param type
* @param oldValue
* @param subtree
* @param log
*/
HTMLElement.prototype.observe =function( type,oldValue=true, subtree=true,log=true){
let numObserved=this.dataset.observed;
const infoElmt=\`of the element '\${this.tagName.toLowerCase()}' (with name:'\${this.getAttribute('name')??''}')\`
if(arguments && !numObserved) {
this.config = {...type, subtree};//attributeFilter
const callback = {}, propertieAllowed = {};
['childList', 'attributes', 'characterData'].forEach(_type => {
this.config[_type] = type.hasOwnProperty(_type);
callback[_type] = type[_type] ?? undefined;
})
if (this.config.attributes) this.config.attributeOldValue = oldValue;
if (this.config.characterData) this.config.characterDataOldValue = oldValue;
propertieAllowed.attributes = ((mut) => { //attributes target newValue attributeName oldValue
return {
target : mut.target, newValue: mut.target.getAttribute(mut.attributeName),
attributeName: mut.attributeName, oldValue: mut.oldValue
}
});
propertieAllowed.childList = ((mut) => {//childList : target addedNodes removedNodes
return {target: mut.target, addedNodes: [...mut.addedNodes], removedNodes: [...mut.removedNodes]}
});
propertieAllowed.characterData = ((mut) => { //characterData oldText newText target
return {oldText: mut.oldValue, newText: mut.target.data, target: mut.target}
});
const cbk = (mutationsList) => {
for (var mutation of mutationsList) {
if (callback[mutation.type]) callback[mutation.type].call(this, propertieAllowed[mutation.type](mutation));
}
}
numObserved= 'obs-'+new Date().getTime();
this.dataset.observed=numObserved;
this.observer={[numObserved] : new MutationObserver(cbk)};
if(log)console.log( \`The observer \${infoElmt} n° \${ numObserved } is now created.\`)
}
this.observer[numObserved].observe(this, this.config);
this.dataset.hasObserverConnected= true;
if(log)console.log( \`The observer \${infoElmt} n° \${ numObserved } is connected.\\n\\n\`)
}
/**
*
* @param regexs
* @param strs
* @param callbacs
*/
String.prototype.replaceWithArray=function ( regexs, strs,callbacs) {
let str=this;
regexs.forEach((regex,idx)=>{
str = String.prototype.replace.call(str,regex,strs.at(idx),callbacs?.at(idx));
});
return str;
}
`;
// Reset `lastIndex` if this regex is defined globally
// regex.lastIndex = 0;
let m;
while ((m = regex.exec(str)) !== null) {
// This is necessary to avoid infinite loops with zero-width matches
if (m.index === regex.lastIndex) {
regex.lastIndex++;
}
// The result can be accessed through the `m`-variable.
m.forEach((match, groupIndex) => {
console.log(`Found match, group ${groupIndex}: ${match}`);
});
}
Please keep in mind that these code samples are automatically generated and are not guaranteed to work. If you find any syntax errors, feel free to submit a bug report. For a full regex reference for JavaScript, please visit: https://developer.mozilla.org/en/docs/Web/JavaScript/Guide/Regular_Expressions