als-document 0.12.0 → 1.0.0-beta

package/src/node/node.js

@@ -0,0 +1,193 @@
+function insertBefore(arr, index, newItem) {
+   const existingIndex = arr.indexOf(newItem);
+   if (existingIndex !== -1) arr.splice(existingIndex, 1);
+   arr.splice(index, 0, newItem);
+}
+
+class Node {
+   constructor(tagName, attributes = {}, parent = null) {
+      this.isSingle = false;
+      this.tagName = tagName;
+      this.attributes = attributes;
+      this.childNodes = [];
+      if (parent !== null) parent.childNodes.push(this)
+      this.parent = parent;
+      this._classList = null; // Cache the classList instance
+      this.__style = null;
+      this._dataset = null
+   }
+
+   get id() { return this.attributes.id ? this.attributes.id : null; }
+   set id(newValue) { this.attributes.id = newValue; }
+   get className() {return this.attributes.class || null}
+   get parentNode() { return this.parent }
+   get ancestors() {
+      if(!this.parent) return []
+      const ancestors = []
+      let element = this.parent
+      while (element.tagName !== 'ROOT') {
+         ancestors.push(element)
+         element = element.parent
+      }
+      return ancestors.reverse()
+   }
+
+   get childNodeIndex() {
+      if(!this.parent) return null
+      return this.parent.childNodes ? this.parent.childNodes.indexOf(this) : null 
+   }
+
+   get childIndex() { 
+      if(!this.parent) return null
+      return this.parent.children ? this.parent.children.indexOf(this) : null 
+   }
+   get previousElementSibling() { return this.prev }
+   get prev() {
+      if (!this.childIndex) return null // if no index or index == 0
+      return this.parent.children[this.childIndex - 1]
+   }
+
+   get nextElementSibling() { return this.next }
+   get next() {
+      if (!this.childIndex) return null
+      return this.parent.children[this.childIndex + 1] || null
+   }
+
+   get dataset() {
+      if (!this._dataset) this._dataset = getDataset(this);
+      return this._dataset;
+   }
+
+   get classList() {
+      if (!this._classList) this._classList = new NodeClassList(this);
+      return this._classList;
+   }
+
+   get style() {
+      if (!this.__style) this.__style = buildStyle(this.attributes)
+      return this.__style
+   }
+
+   get outerHTML() {
+      const attrs = Object.entries(this.attributes).map(([key, val]) => val.length ? `${key}="${val}"` : key).join(" ");
+      return `<${this.tagName}${attrs ? ' '+attrs : ''}>${this.innerHTML}</${this.tagName}>`;
+   }
+
+   getAttribute(attrName) { return this.attributes[attrName] || null }
+   setAttribute(attrName, value) { this.attributes[attrName] = value }
+   removeAttribute(attrName) { delete this.attributes[attrName] }
+
+   remove() {
+      if (!this.parent) return
+      const index = this.childNodeIndex;
+      if (index !== null) this.parent.childNodes.splice(index, 1);
+   }
+
+   get innerHTML() {
+      return this.childNodes.map(child => {
+         if (child instanceof Node || child instanceof SingleNode) return child.outerHTML;
+         else if (child instanceof TextNode) return child.textContent; // Assuming child is a text node or something that can be stringified.
+         else return child
+      }).join("");
+   }
+
+   $$(query) {return this.querySelectorAll(query)}
+   querySelectorAll(query) {
+      const selectors = Query.get(query)
+      return find(selectors, this, new Set())
+   }
+   $(query) {return this.querySelector(query)}
+   querySelector(query) {
+      const selectors = Query.get(query)
+      return find(selectors, this, new Set(), true)[0] || null
+   }
+
+   getElementsByClassName(query) { return this.querySelectorAll('.' + query) }
+   getElementsByTagName(query) { return this.querySelectorAll(query) }
+   getElementById(query) { return this.querySelector('#' + query) }
+
+   get children() {
+      return this.childNodes.filter(child => {
+         if (!(child instanceof Node)) return false
+         if (child.tagName === '#comment') return false
+         return true
+      });
+   }
+
+   insertAdjacentElement(position, newElement) {
+      if(newElement.tagName === 'ROOT' && newElement.childNodes.length > 0) newElement = newElement.childNodes[0]
+      const pos = position.toLowerCase();
+      if (pos === "afterbegin") this.childNodes.unshift(newElement);
+      else if (pos === "beforeend") this.childNodes.push(newElement);
+      newElement.parent = this
+      if (!this.parent) return newElement
+      if (pos === "beforebegin") insertBefore(this.parent.childNodes, this.childNodeIndex, newElement)
+      else if (pos === "afterend") this.parent.childNodes.splice(this.childNodeIndex + 1, 0, newElement);
+      newElement.parent = this.parent
+      return newElement
+   }
+
+   insertAdjacentHTML(position, html) {
+      const newNode = parseHTML(html);
+      newNode.childNodes.reverse().forEach(node => {
+         this.insertAdjacentElement(position, node);
+      });
+      return newNode
+   }
+
+   insertAdjacentText(position, text) {
+      return this.insertAdjacentElement(position, new TextNode(text));
+   }
+
+   insert(position,element) {
+      const positions = ['beforebegin','afterbegin','beforeend','afterend']
+      if(positions[position]) position = positions[position]
+      if(typeof element === 'string') {
+         element = element.trim()
+         if(element.startsWith('<') && element.endsWith('>')) {
+            return this.insertAdjacentHTML(position,element)
+         } 
+         return this.insertAdjacentText(position,element)
+      } 
+      return this.insertAdjacentElement(position,element)
+   }
+
+   set innerHTML(html) {
+      const parsed = parseHTML(html);
+      this.childNodes = parsed.childNodes;
+   }
+
+   set outerHTML(html) {
+      const parsed = parseHTML(html);
+      if (!this.parent) return console.log('element has no parent node')
+      const index = this.childIndex
+      if (index !== null) this.parent.childNodes.splice(index, 1, ...parsed.childNodes);
+   }
+
+   appendChild(newChild) {
+      if (newChild instanceof Node || newChild instanceof TextNode || newChild instanceof SingleNode) {
+         if (newChild.parent) newChild.parent.childNodes = newChild.parent.childNodes.filter(child => child !== newChild); // Если у newChild уже есть родительский узел, необходимо его удалить оттуда
+      } else if(typeof newChild === 'string') newChild = new TextNode(newChild)
+      else return newChild
+      this.childNodes.push(newChild);
+      newChild.parent = this;
+      return newChild; // возвращаем добавленный узел (по спецификации DOM)
+   }
+
+   get textContent() {
+      if (this.childNodes.length === 0) return this.nodeName === '#text' ? this.nodeValue : '';
+      return this.childNodes.map(child => { // Concatenate text content of this node and all descendants
+         if(child instanceof SingleNode) return ''
+         if(child instanceof TextNode) return child.nodeValue
+         if(child instanceof Node) return child.textContent;
+         else return child;
+      }).join(" ");
+   }
+
+   set textContent(value) {
+      this.childNodes = []; // Clear the current child nodes
+      if (value !== null && value !== undefined) { // Add a new text node with the given value
+         this.childNodes.push(value.toString());  // In your code, text nodes are just strings.
+      }
+   }
+}

package/src/node/root.js

@@ -0,0 +1,11 @@
+class Root extends Node {
+   constructor() {
+      super('ROOT',{},null);
+      this.isSingle = false
+   }
+
+   get body() {return this.$('body')}
+   get head() {return this.$('head')}
+   get title() {return this.$('title')}
+   set title(title) {return this.$('title').innerHTML = title}
+}

package/src/node/single-node.js

@@ -0,0 +1,31 @@
+class SingleNode extends Node {
+   constructor(tagName, attributes = {}, parent = null) {
+      if(attributes['?'] && tagName === '?xml') delete attributes['?']
+      super(tagName, attributes, parent);
+      this.isSingle = true
+   }
+   
+   get outerHTML() { // outerHTML for single node
+      if (this.tagName === "#cdata-section") return `<![CDATA[${this.nodeValue}]]>`;
+      const attrs = Object.entries(this.attributes).map(([key, val]) => val.length ? `${key}="${val}"` : key).join(" ");
+      return `<${this.tagName} ${attrs}${this.tagName === '?xml' ? '?' : ''}>`;
+   }
+   // Remove getters,setters and methods which no make sence in single node
+   get innerHTML() { return ""; }
+   set innerHTML(_) { }
+   $(_) {return null}
+   $$(_) {return []}
+   querySelectorAll(_) { return []; }
+   querySelector(_) { return null; }
+   getElementsByClassName(_) { return []; }
+   getElementsByTagName(_) { return []; }
+   getElementById(_) { return null; }
+   get children() { return []; }
+   insertAdjacentElement(_, __) { }
+   insertAdjacentHTML(_, __) { }
+   insertAdjacentText(_, __) { }
+   appendChild(_) { }
+   insert(_,__) { }
+   get textContent() { return ""; }
+   set textContent(_) { }
+}

package/src/node/style.js

@@ -0,0 +1,26 @@
+function buildStyle(attributes) {
+   const styles = attributes.style || "";
+   
+   const camelToKebab = str => str.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase();
+   const kebabToCamel = str => str.replace(/-([a-z])/g, g => g[1].toUpperCase());
+
+   const baseStyleObj = styles.split(";").reduce((acc, style) => {
+      const [key, value] = style.split(":").map(s => s.trim());
+      if (key && value) acc[kebabToCamel(key)] = value;
+      return acc;
+   }, {});
+
+   return new Proxy(baseStyleObj, {
+      get: (obj, prop) => obj[camelToKebab(prop)] || obj[prop],
+      set: (obj, prop, value) => {
+         obj[camelToKebab(prop)] = value;
+         attributes.style = Object.entries(obj).map(([k, v]) => `${camelToKebab(k)}: ${v}`).join("; ");
+         return true;
+      },
+      deleteProperty: (obj, prop) => {
+         delete obj[camelToKebab(prop)];
+         attributes.style = Object.entries(obj).map(([k, v]) => `${camelToKebab(k)}: ${v}`).join("; ");
+         return true;
+      }
+   });
+}

package/src/node/text-node.js

@@ -0,0 +1,9 @@
+class TextNode {
+   constructor(data) {
+      this.nodeName = '#text';
+      this.parent = null;
+      this.textContent = data;
+   }
+   get nodeValue() {return this.textContent}
+   get parentNode() {return this.parent}
+}

package/src/parse/cache.js

@@ -0,0 +1,33 @@
+function buildFromCache(cached) {
+   function buildNode(cache,parent=null) {
+      if(typeof cache === 'string') return parent.childNodes.push(cache)
+      const {isSingle,tagName,attributes,childNodes,textContent} = cache
+      if(textContent) return parent.childNodes.push(new TextNode(textContent))
+      if(isSingle) return parent.childNodes.push(new SingleNode(tagName,attributes))
+      const newDoc = tagName === 'ROOT' ? new Root() : new Node(tagName,attributes,parent)
+      childNodes.forEach(childNode => {
+         buildNode(childNode,newDoc)
+      });
+      return newDoc
+   }
+   return buildNode(cached)
+}
+
+
+function cacheDoc(doc) {
+   const props = ['isSingle','tagName','attributes']
+   function addToCache(element,cache={}) {
+      if(typeof element === 'string') return element
+      if(element.nodeName === '#text') return {textContent:element.textContent}
+      props.forEach(prop => {
+         if(element[prop]) cache[prop] = element[prop]
+      });
+      if(!element.childNodes) return cache
+      cache.childNodes = []
+      element.childNodes.forEach(childNode => {
+         cache.childNodes.push(addToCache(childNode))
+      });
+      return cache
+   }
+   return addToCache(doc)
+}

package/src/parse/parse-atts.js

@@ -0,0 +1,36 @@
+function parseAttributes(str) {
+   const attrs = {};
+   let key = "";
+   let value = "";
+   let isKey = true;
+   let quoteChar = null;
+
+   for (let i = 0; i < str.length; i++) {
+      const char = str[i];
+
+      if (isKey && (char === '=' || char === ' ')) {
+         if (char === '=') isKey = false;
+         else if (key.trim()) { // We've found an attribute without a value
+            attrs[key.trim()] = true;  // Set the value to true for boolean attributes
+            key = ""; // Reset the key
+         }
+         continue;
+      }
+
+      if (!quoteChar && (char === '"' || char === "'")) {
+         quoteChar = char;
+         continue;  // we skip the quote itself
+      } else if (quoteChar && char === quoteChar) {
+         quoteChar = null;
+         attrs[key.trim()] = value.trim();
+         key = ""; value = ""; isKey = true;
+         continue;
+      }
+
+      if (isKey) key += char;
+      else value += char;
+   }
+   
+   if (key.trim() && !value) attrs[key.trim()] = ''; // After the loop, check if there's a leftover key, which would be an attribute without a value
+   return attrs;
+}

package/src/parse/parser.js

@@ -0,0 +1,98 @@
+function parseHTML(html) {
+   const root = new Root();
+   const stack = [root];
+   let currentText = "", i = 0;
+   let max = 0
+
+   function parseScript() {
+      if (!html.startsWith("<script", i)) return false;
+      const openTagEnd = html.indexOf(">", i);
+      if (openTagEnd === -1) return false; 
+
+      const attributesString = html.substring(i + 7, openTagEnd).trim();  // +7 чтобы пропустить "<script"
+      const attributes = parseAttributes(attributesString); // Извлечь атрибуты
+
+      let closeTagStart = html.indexOf("</script>", openTagEnd); // Находим закрывающий тег
+      if (closeTagStart === -1) return false;  // Если нет закрывающего тега, возвращаем ошибку
+      const content = html.substring(openTagEnd + 1, closeTagStart); // Получить содержимое тега
+
+      const scriptNode = new Node('script', attributes, stack[stack.length - 1]); // Создаем узел
+      if(content.length > 0) scriptNode.childNodes.push(content);
+
+      // Переместить указатель i к концу закрывающего тега
+      i = closeTagStart + 9;  // +9 чтобы пропустить "</script>"
+      return true;
+   }
+
+   function parseSpecial(startStr, endStr, n1, n2, tag) {
+      if (!html.startsWith(startStr, i)) return false
+      const end = html.indexOf(endStr, i + n1);
+      const strNode = new Node(tag, {}, stack[stack.length - 1]);
+      strNode.childNodes.push(html.substring(i + n1, end));
+      i = end + n2;
+      return true
+   }
+
+   while (i < html.length) {
+      if(i >= max) max = i;
+      else break;
+      if (parseScript()) continue
+      if (parseSpecial("<!--", "-->", 4, 3, '#comment')) continue
+      if (parseSpecial("<style", "</style>", 7, 8, 'style')) continue
+
+      if (html.startsWith("<![CDATA[", i)) {
+         const end = html.indexOf("]]>", i + 9);
+         if (end === -1) break;  // Убедитесь, что существует закрывающий тег
+         const content = html.substring(i + 9, end); // это содержимое CDATA
+         const cdataNode = new SingleNode("#cdata-section", {}, stack[stack.length - 1]);
+         cdataNode.nodeValue = content;
+         i = end + 3;
+         continue;
+      }
+
+      if (html.startsWith("<", i)) {
+         if (currentText && stack[stack.length - 1]) {
+            const textNode = new TextNode(currentText)
+            stack[stack.length - 1].childNodes.push(textNode);
+            textNode.parent = stack[stack.length - 1]
+            currentText = "";
+         }
+
+         let tagEnd = i + 1;
+         let insideQuotes = false;
+         let quoteChar = null;
+
+         while (tagEnd < html.length) {
+            const char = html[tagEnd];
+            if (!insideQuotes && (char === '"' || char === "'")) {
+               insideQuotes = true;
+               quoteChar = char;
+            } else if (insideQuotes && char === quoteChar) {
+               insideQuotes = false;
+               quoteChar = null;
+            }
+
+            if (!insideQuotes && char === '>') break;
+            tagEnd++;
+         }
+
+         const tagContent = html.substring(i + 1, tagEnd);
+         if (tagContent.startsWith("/")) stack.pop(); // It is close tag
+         else { // It is open tag
+            let isSelfClosing = tagContent.endsWith('/');
+            const tagNameEnd = tagContent.search(/\s|>|\//); // add a check for "/"
+            const tagName = tagContent.substring(0, tagNameEnd > 0 ? tagNameEnd : tagEnd - i - 1);
+            const attributesString = tagContent.substring(tagName.length, isSelfClosing ? tagContent.length - 1 : tagContent.length).trim();
+            const attributes = parseAttributes(attributesString);
+            if (VOID_TAGS.has(tagName.toLowerCase()) || isSelfClosing) new SingleNode(tagName, attributes, stack[stack.length - 1])
+            else stack.push(new Node(tagName, attributes, stack[stack.length - 1]));
+         }
+         i = tagEnd + 1;
+      } else {
+         currentText += html[i];
+         i++;
+      }
+   }
+   if (currentText.trim() && stack[stack.length - 1]) stack[stack.length - 1].childNodes.push(new TextNode(currentText));
+   return root;
+}

package/src/parse/void-tags.js

@@ -0,0 +1,5 @@
+const VOID_TAGS = new Set([
+   "area", "base", "br", "col", "command", "embed", "hr", "img", "input",
+   "keygen", "link", "meta", "param", "source", "track", "wbr",
+   "!doctype",'?xml'
+]);

package/src/query/check-element.js

@@ -0,0 +1,83 @@
+function checkElement(el,selector) {
+   if(selector == undefined) return true
+   if(el == null) return false
+   let {tag,classList,attribs:attributes,id,prev,ancestors,parents,prevAny} = selector
+   if(typeof el === 'string') return false
+   if(id !== undefined && el.id === null) return false
+   if(id && id !== el.id) return false
+   if(tag && el.tagName === undefined) return false
+   else if(tag && tag !== el.tagName) return false
+   const clas = el.attributes.class
+   if(classList !== undefined && (clas === undefined || clas === '')) return false
+   else if(classList !== undefined) {
+      if(classList.every(e => el.classList.contains(e)) === false) return false
+   }
+   if(checkattributes(attributes,el) === false) return false
+   if(checkElement(el.prev,prev) === false) return false
+   if(checkAncestors(el.ancestors,ancestors) === false) return false
+   if(checkParents(el.ancestors,parents) === false) return false
+   if(el.parent) {
+      if(checkPrevAny(el.parent.children,el.childIndex,prevAny) == false) return false
+   }
+   return true
+}
+
+function checkattributes(attributes=[],el) {
+   let elattributes = el.attributes
+   let names = Object.keys(elattributes)
+   let passedTests = 0
+   if(attributes) for(let i=0; i<attributes.length; i++) {
+      let {name,value,check} = attributes[i]
+      if(name == 'inner' && value !== undefined && check && el.inner) {
+         if(check(el.inner)) passedTests++
+      }
+      
+      if(!names.includes(name)) continue
+      else if(value == undefined) passedTests++
+      else if(value && elattributes[name]) {
+         if(check(elattributes[name]) == false) continue
+         else passedTests++
+      } 
+   }
+   if(passedTests == attributes.length) return true
+   else return false
+}
+
+function checkPrevAny(children=[],index,prevAny) {
+   let size = children.length
+   if((size == 0 || index == 0) && prevAny) return false
+   for(let i=index; i>=0; i--) {
+      if(checkElement(children[i],prevAny)) return true
+   }
+   return false
+}
+
+function checkAncestors(ancestors=[],selectorAncestors=[]) {
+   let count = 0
+   if(selectorAncestors.length == 0) return true
+   let endIndex = ancestors.length-1
+   let selectorIndex = selectorAncestors.length-1
+   while(selectorIndex>=0) {
+      for(let i=endIndex; i>=0; i--) {
+         endIndex=i-1
+         if(checkElement(ancestors[i],selectorAncestors[selectorIndex]) == true) {
+            count++
+            break
+         }
+      }
+      selectorIndex--
+   }
+   if(count == selectorAncestors.length) return true
+   else return false
+}
+
+function checkParents(ancestors=[],selectorParents=[]) {
+   if(selectorParents.length === 0) return true
+   if(ancestors.length < selectorParents.length) return false
+   let index = ancestors.length-1
+   for(let i=selectorParents.length-1; i>=0; i--) {
+      if(checkElement(ancestors[index],selectorParents[i]) === false) return false
+      index--
+   }
+   return true
+}

package/src/query/query.js

@@ -0,0 +1,142 @@
+class Query {
+   static get(query) {
+      let q = new Query(query)
+      return q.selectors
+   }
+
+   constructor(query) {
+      this.query = query
+      this.selectors = []
+      this.stringValues = [];
+      this.parseSelectors(query.split(','))
+   }
+
+   parseSelectors(selectors) {
+      selectors.forEach(selector => {
+         let originalSelector = selector.trim()
+         selector = this.removeSpaces(selector)
+         this.stringValues = []
+         selector = selector.replace(/\[.*?\]/g, (value) => {
+            this.stringValues.push(value)
+            return `[${this.stringValues.length - 1}]`
+         })
+         let [element, ancestors] = this.splitAndCutLast(selector, ' ') // \s - ancestor
+         element = this.getFamily(element)
+         if (ancestors.length > 0)
+            element.ancestors = ancestors.map(ancestor => this.getFamily(ancestor))
+         element.group = originalSelector
+         this.selectors.push(element)
+      });
+   }
+
+   splitAndCutLast(string, splitBy) {
+      const array = string.split(splitBy);
+      const last = array.pop(); // pop() удаляет и возвращает последний элемент массива
+      return [last, array];
+   }
+
+   getFamily(group, element, prev, prevAny, sign) {
+      if (group.match(/\~|\+/) !== null) {
+         let [last, prevBrothers] = this.splitAndCutLast(group, /\~|\+/)
+         let signs = group.replace(last, '')
+         prevBrothers.forEach(el => signs = signs.replace(el, ''))
+         signs = signs.match(/\~|\+/g)
+         if (signs.length == 1) {
+            sign = signs[0]
+         } else if (signs.length > 1) {
+            sign = signs.splice(signs.length - 1, signs.length - 1)[0]
+            prevBrothers[0] = prevBrothers.map((b, i) => {
+               if (i < prevBrothers.length - 1) b += signs[i]
+               return b
+            }).join('')
+            prevBrothers[0] = this.getFamily(prevBrothers[0])
+         }
+         if (sign == '~') prevAny = prevBrothers[0] // ~ - any prev brother
+         else if (sign == '+') prev = prevBrothers[0] // + - prev brother
+         element = last
+      } else element = group
+      let family
+      if (prev || prevAny) {
+         family = this.getParents(element)
+         if (prev) family.prev = this.getParents(prev)
+         if (prevAny) family.prevAny = this.getParents(prevAny)
+      } else family = this.getParents(element)
+      if (family.query !== group) family.group = group
+      return family
+   }
+
+   getParents(selector) {
+      if (typeof selector == 'string') {
+         let [element, parents] = this.splitAndCutLast(selector, '>')
+         element = this.buildElement(element)
+         parents = parents.map(parent => this.buildElement(parent))
+         if (parents.length > 0) element.parents = parents
+         return element
+      } else return selector
+   }
+
+   buildElement(element, id = null, tag = null, classList = []) {
+      let query = element
+      element = element.replace(/\#(\w-?)*/, $id => {
+         id = $id.replace(/^\#/, ''); return ''
+      })
+      element = element.replace(/\.(\w-?)*/, $class => {
+         classList.push($class.replace(/^\./, '')); return ''
+      })
+      element = element.replace(/(\w\:?-?)*/, $tag => {
+         tag = $tag == '' ? null : $tag; return ''
+      })
+      let attribs = this.getAttributes(element)
+      element = { query }
+      if (id) element.id = id
+      if (tag) element.tag = tag
+      if (classList.length > 0) element.classList = classList
+      if (attribs.length > 0) element.attribs = attribs
+      return element
+   }
+
+   getAttributes(element) {
+      let attribs = this.stringValues.filter((value, index) => {
+         let searchValue = `[${index}]`
+         if (element.match(searchValue)) return true
+         else return false
+      })
+      attribs = attribs.map(attrib => {
+         let query = attrib
+         attrib = attrib.replace('[', '').replace(']', '')
+         let [name, value] = attrib.split(/[\~\|\^\$\*]?\=/)
+         let sign = attrib.replace(name, '').replace(value, '')
+         attrib = { query }
+         if (name) attrib.name = name
+         if (value) attrib.value = value.trim().replace(/^\"/, '').replace(/\"$/, '')
+         if (sign) {
+            attrib.sign = sign
+            attrib.check = this.getAttribFn(sign).bind(attrib)
+         }
+         return attrib
+      });
+      return attribs
+   }
+
+   getAttribFn(sign) {
+      if (sign == '=') return function (value) { return value === this.value }
+      if (sign == '*=') return function (value) { return value.includes(this.value) }
+      if (sign == '^=') return function (value) { return value.startsWith(this.value) }
+      if (sign == '$=') return function (value) { return value.endsWith(this.value) }
+      if (sign == '|=') return function (value) {
+         return value.trim().split(' ').length == 1
+            && (value.startsWith(this.value) || value.startsWith(this.value + '-'))
+            ? true : false
+      }
+      if (sign == '~=') return function (value) { // includes whole word only
+         return this.value.trim().split(' ').length == 1 && value.includes(this.value) ? true : false
+      }
+   }
+
+   removeSpaces(selector) {
+      selector = selector.replace(/\s{2}/g, ' ') // remove double spaces
+      selector = selector.replace(/\s?\^?\$?\|?\~?\*?\=\s*/g, (m) => m.trim()) // remove spaces inside []
+      selector = selector.replace(/\s?(\+|\~|\>)\s?/g, (m) => m.trim()) // remove spaces around +|~|>
+      return selector
+   }
+}