DEV Community: Frank Wisniewski

# Regex Replace Plugin for Obsidian

Frank Wisniewski — Sat, 13 Sep 2025 11:54:21 +0000

Overview

Regex Replace is a plugin for Obsidian that allows you to run regex-based search and replace operations directly inside the editor.
It comes with a convenient modal dialog, live preview of matches, and a preset system to save, overwrite, and delete commonly used regex operations.

Written in vanilla JavaScript 😊

Installation

Download the plugin files (manifest.json and main.js).
Copy them into a folder inside your Obsidian vault, for example:

   <your-vault>/.obsidian/plugins/regex-replace/

The folder should contain:

   manifest.json
   main.js

Restart or reload Obsidian.
Go to Settings → Community Plugins and enable Regex Replace.

Usage

You can open the plugin in two ways:

Command Palette (Ctrl+P / Cmd+P) → Search for Regex Search & Replace
Right-click context menu inside the editor → Regex Search & Replace

This will open the Regex Search & Replace Modal.

Features

1. Regex Input Fields

Regex pattern – enter the search pattern (JavaScript regex syntax).
Replacement text – enter the replacement string ($1, $2 etc. for capturing groups).
Flags – e.g. g (global), i (case-insensitive), m (multiline).

2. Options

Use only selection – restrict replacement to the current text selection.
Replace all – toggle between replacing all matches or just the first one.

3. Live Preview

Shows the first 50 matches in a scrollable table.
Each row displays the full line before and after replacement.
Matches are highlighted inline for better context.

4. Execute

Applies the regex replacement to either the current selection or the entire document.
Updates the editor content immediately.

Presets

Presets let you save, reuse, and manage regex operations.

Saving a Preset

Configure your regex pattern, replacement, and options.
Click "Save as preset".
Enter a preset name.
The preset will appear in the dropdown.

If a preset with the same name already exists, it will be overwritten.
You will see a notice: “Preset overwritten: NAME”.

Loading a Preset

Select a preset from the dropdown.
The input fields (pattern, replacement, flags, etc.) will automatically update.
Preview and Execute now use these loaded values.

Deleting a Preset

Select the preset in the dropdown.
Click "Delete preset".
The preset will be removed permanently.

Examples

Example 1: Swap First and Last Names

Text

Wisniewski Frank
Adenau
Wisniewski Frank
Adenau

Search pattern

^(\w+) (\w+)$\n^(\w+)

Replacement text

$2, $1, 53518 $3

Result

Frank, Wisniewski, 53518 Adenau
Frank, Wisniewski, 53518 Adenau

Example 2: Replace All `i` With `x`

Text

This is a simple line
With multiple words

Search pattern

Replacement text

Result

Thxs xs a sxmple lxne
Wxth multxple words

Tips

Use ^ and $ for line anchors.
Use capturing groups ( … ) with $1, $2 in the replacement.
Combine flags:
- g = global (all matches)
- i = case-insensitive
- m = multiline (anchors match at line breaks)

Known Limitations

Very large documents may slow down preview if many matches are found (preview is capped at 50 matches).
Regex syntax follows JavaScript’s RegExp engine – not all features from PCRE or other regex engines are supported.

Files

manifest.json

{
  "id": "regex-replace",
  "name": "Regex Replace",
  "version": "1.0.0",
  "minAppVersion": "0.15.0",
  "description": "Führt Regex-Suchen und Ersetzen im aktiven Editor aus.",
  "author": "Frank Wisniewski",
  "isDesktopOnly": false
}

main.js

const { Plugin, Modal, Setting, Notice } = require("obsidian");

module.exports = class RegexReplacePlugin extends Plugin {
    async onload() {
        this.settings = Object.assign(
            { 
                pattern: "", replacement: "", flags: "gm", 
                onlySelection: false, replaceAll: true,
                presets: []   
            }, 
            await this.loadData()
        );

        this.addCommand({
            id: "regex-search-replace",
            name: "Regex Search & Replace",
            editorCallback: (editor) => this.openModal(editor),
        });

        this.registerEvent(
            this.app.workspace.on("editor-menu", (menu, editor) =>
                menu.addItem((item) =>
                    item.setTitle("Regex Search & Replace").setIcon("search").onClick(() => this.openModal(editor))
                )
            )
        );
    }

    openModal(editor) {
        new RegexReplaceModal(
            this.app,
            editor,
            this.settings,
            async (pattern, replacement, flags, onlySelection, replaceAll) => {
                try {
                    let regexFlags = (flags || "").toString();
                    if (!replaceAll) regexFlags = regexFlags.replace("g", "");
                    const regex = new RegExp(pattern, regexFlags);

                    if (onlySelection) {
                        const sel = editor.getSelection();
                        if (!sel) return new Notice("No selection found.");
                        editor.replaceSelection(sel.replace(regex, replacement));
                    } else {
                        editor.setValue(editor.getValue().replace(regex, replacement));
                    }

                    this.settings = { ...this.settings, pattern, replacement, flags, onlySelection, replaceAll };
                    await this.saveData(this.settings);
                    new Notice("Regex Replace successful!");
                } catch (err) {
                    new Notice("Regex error: " + err);
                }
            },
            this
        ).open();
    }
};

// --- Modal for entering preset name ---
class PresetNameModal extends Modal {
    constructor(app, onSubmit) {
        super(app);
        this.onSubmit = onSubmit;
    }

    onOpen() {
        const { contentEl } = this;
        contentEl.createEl("h2", { text: "Save Preset" });

        let name = "";

        new Setting(contentEl)
            .setName("Preset name")
            .addText((t) => t.setPlaceholder("e.g. Swap Names").onChange((val) => (name = val)));

        new Setting(contentEl)
            .addButton((b) => b.setButtonText("Save").setCta().onClick(() => {
                if (name) {
                    this.close();
                    this.onSubmit(name);
                }
            }))
            .addButton((b) => b.setButtonText("Cancel").onClick(() => this.close()));
    }

    onClose() {
        this.contentEl.empty();
    }
}

// --- Main Modal ---
class RegexReplaceModal extends Modal {
    constructor(app, editor, settings, onSubmit, plugin) {
        super(app);
        Object.assign(this, { editor, settings, onSubmit, plugin });

        // state from settings
        this.pattern = settings.pattern;
        this.replacement = settings.replacement;
        this.flags = settings.flags;
        this.onlySelection = settings.onlySelection;
        this.replaceAll = settings.replaceAll;

        this.controls = {};
    }

    // central method: load preset into variables + UI
    loadPreset(p) {
        this.pattern = p.pattern;
        this.replacement = p.replacement;
        this.flags = p.flags;
        this.onlySelection = p.onlySelection;
        this.replaceAll = p.replaceAll;

        if (this.controls.pattern) this.controls.pattern.setValue(this.pattern);
        if (this.controls.replacement) this.controls.replacement.setValue(this.replacement);
        if (this.controls.flags) this.controls.flags.setValue(this.flags);
        if (this.controls.onlySelection) this.controls.onlySelection.setValue(this.onlySelection);
        if (this.controls.replaceAll) this.controls.replaceAll.setValue(this.replaceAll);
    }

    showPreview(previewEl) {
        previewEl.empty();
        let flags = this.flags;
        if (!flags.includes("g")) flags += "g";

        let regex;
        try {
            regex = new RegExp(this.pattern, flags);
        } catch (e) {
            return previewEl.createEl("div", { text: "Invalid regex: " + e.message });
        }

        const text = this.onlySelection ? this.editor.getSelection() : this.editor.getValue();

        const wrapper = previewEl.createEl("div", {
            attr: { style: "max-height:200px; overflow-y:auto; width:100%;" }
        });

        const table = wrapper.createEl("table", {
            attr: { style: "width:100%; min-width:100%; border-collapse:collapse; font-family:var(--font-monospace); font-size:0.9em;" }
        });

        const thead = table.createEl("thead", { attr: { style: "position:sticky; top:0; background:var(--background-secondary);" }});
        const headerRow = thead.createEl("tr");
        ["Before", "After"].forEach(h =>
            headerRow.createEl("th", {
                text: h,
                attr: { style: "border:1px solid var(--background-modifier-border); padding:4px 6px; text-align:left;" }
            })
        );

        const tbody = table.createEl("tbody");
        let count = 0;

        text.replace(regex, (...args) => {
            if (count >= 50) return;

            const match = args[0];

            const startLine = text.lastIndexOf("\n", args[args.length - 2]);
            const endLine = text.indexOf("\n", args[args.length - 2] + match.length);
            const line = text.slice(startLine + 1, endLine === -1 ? undefined : endLine);

            const replacedLine = line.replace(regex, this.replacement);

            const row = tbody.createEl("tr");
            row.createEl("td", {
                text: line,
                attr: { style: "border:1px solid var(--background-modifier-border); padding:4px 6px; white-space:pre-wrap; width:50%;" }
            });
            row.createEl("td", {
                text: replacedLine,
                attr: { style: "border:1px solid var(--background-modifier-border); padding:4px 6px; white-space:pre-wrap; width:50%;" }
            });

            count++;
            return match;
        });

        previewEl.createEl("div", {
            text: count ? `${count} matches (max. 50 shown)` : "No matches found.",
            attr: { style: "margin-top:4px; font-size:0.85em; color:var(--text-muted);" }
        });
    }

    onOpen() {
        const { contentEl } = this;
        contentEl.createEl("h2", { text: "Regex Search & Replace" });

        const previewEl = contentEl.createDiv({ cls: "regex-preview" });

        let dropdown;

        // Preset Dropdown
        const presetSetting = new Setting(contentEl).setName("Saved presets");
        presetSetting.addDropdown(dd => {
            dropdown = dd;
            dd.addOption("", "-- Select preset --");
            this.settings.presets.forEach(p => dd.addOption(p.name, p.name));
            dd.onChange((val) => {
                const p = this.settings.presets.find(pr => pr.name === val);
                if (p) {
                    this.loadPreset(p);
                    new Notice("Preset loaded: " + val);
                }
            });
        });

        // Buttons for presets
        new Setting(contentEl)
            .addButton(b => b.setButtonText("Save as preset").onClick(() => {
                new PresetNameModal(this.app, async (name) => {
                    const exists = this.settings.presets.some(p => p.name === name);
                    this.settings.presets = this.settings.presets.filter(p => p.name !== name);

                    const newPreset = {
                        name,
                        pattern: this.pattern,
                        replacement: this.replacement,
                        flags: this.flags,
                        onlySelection: this.onlySelection,
                        replaceAll: this.replaceAll
                    };
                    this.settings.presets.push(newPreset);
                    await this.plugin.saveData(this.settings);

                    if (dropdown) {
                        // clear & rebuild to avoid duplicate options
                        dropdown.selectEl.innerHTML = "";
                        dropdown.addOption("", "-- Select preset --");
                        this.settings.presets.forEach(p => dropdown.addOption(p.name, p.name));
                        dropdown.setValue(name);
                    }

                    new Notice(exists ? `Preset overwritten: ${name}` : `Preset saved: ${name}`);
                }).open();
            }))
            .addButton(b => b.setButtonText("Delete preset").onClick(async () => {
                const current = dropdown.getValue();
                if (!current) {
                    new Notice("No preset selected to delete.");
                    return;
                }
                this.settings.presets = this.settings.presets.filter(p => p.name !== current);
                await this.plugin.saveData(this.settings);

                // refresh dropdown
                dropdown.selectEl.innerHTML = "";
                dropdown.addOption("", "-- Select preset --");
                this.settings.presets.forEach(p => dropdown.addOption(p.name, p.name));
                dropdown.setValue("");

                new Notice(`Preset deleted: ${current}`);
            }));

        // Input fields and toggles
        const fields = [
            { key: "pattern", label: "Regex pattern", type: "text", val: this.pattern, set: (v) => (this.pattern = v) },
            { key: "replacement", label: "Replacement text", type: "text", val: this.replacement, set: (v) => (this.replacement = v) },
            { key: "flags", label: "Flags (e.g. g, i, m)", type: "text", val: this.flags, set: (v) => (this.flags = v) },
            { key: "onlySelection", label: "Use only selection", type: "toggle", val: this.onlySelection, set: (v) => (this.onlySelection = v) },
            { key: "replaceAll", label: "Replace all", type: "toggle", val: this.replaceAll, set: (v) => (this.replaceAll = v) },
            { key: "preview", label: "Preview", type: "button", cta: false, handler: () => this.showPreview(previewEl) },
            { key: "execute", label: "Execute", type: "button", cta: true, handler: () => {
                this.close();
                this.onSubmit(this.pattern, this.replacement, this.flags, this.onlySelection, this.replaceAll);
            }}
        ];

        fields.forEach(f => {
            const s = new Setting(contentEl).setName(f.type !== "button" ? f.label : "");
            if (f.type === "text") {
                s.addText((t) => {
                    t.setValue(f.val).onChange(f.set);
                    this.controls[f.key] = t;
                });
            }
            if (f.type === "toggle") {
                s.addToggle((tg) => {
                    tg.setValue(f.val).onChange(f.set);
                    this.controls[f.key] = tg;
                });
            }
            if (f.type === "button") {
                s.addButton((b) => {
                    b.setButtonText(f.label).onClick(f.handler);
                    if (f.cta) b.setCta();
                });
            }
        });
    }

    onClose() {
        this.contentEl.empty();
    }
}

Download

main.js

manifest.json

Author

Developed by Frank Wisniewski
A simple plugin for Obsidian.

Simplifying DOM Manipulation with a Vanilla JavaScript Utility Function

Frank Wisniewski — Fri, 06 Sep 2024 11:00:34 +0000

Introduction

If you've ever worked with jQuery, you know how convenient it is for selecting and manipulating DOM elements. But what if you want similar functionality in vanilla JavaScript without pulling in the entire jQuery library? In this article, we'll walk through how to create a simplified utility function that mimics some of jQuery’s core features like selecting elements and adding classes, all using pure JavaScript.

Let's break down a concise utility function that enables DOM manipulation in a clean, chainable manner. We'll build it step by step and explain each part.

The Code

const $ = function (selector = null) {
    return new class {
        constructor(selector) {
            if (selector) {
                // Check if selector is a single DOM element (nodeType present)
                if (selector.nodeType) {
                    this.nodes = [selector];  // Convert the element into an array
                } 
                // Check if selector is a NodeList
                else if (NodeList.prototype.isPrototypeOf(selector)) {
                    this.nodes = selector;  // Use the NodeList as-is
                } 
                // Otherwise assume it's a CSS selector string
                else {
                    this.nodes = document.querySelectorAll(selector);
                }
                // Store the first element in the variable 'n'
                this.n = this.nodes[0];
            }
        }

        each(callback) {
            this.nodes.forEach(node => callback(node));
            return this;  // Return 'this' for method chaining
        }

        addClass(classNames) {
            return this.each(node => {
                const classes = classNames.split(",").map(className => className.trim());  // Split and trim classes
                node.classList.add(...classes);  // Add the classes to the element
            });
        }
    }(selector);
}

Explanation

Creating the $ Function:

   const $ = function (selector = null) {

The $ function is a simplified utility that mimics jQuery’s $ selector. It accepts a selector as an argument, which can be a CSS selector string, a single DOM element, or a NodeList.

Anonymous Class and Constructor:

   return new class {
       constructor(selector) {
           if (selector) {

This function returns an instance of an anonymous class. Inside the constructor, it checks what type of argument the selector is and processes it accordingly.

Handling the Selector:

   if (selector.nodeType) {
       this.nodes = [selector];  // Convert the element into an array
   } else if (NodeList.prototype.isPrototypeOf(selector)) {
       this.nodes = selector;  // Use the NodeList as-is
   } else {
       this.nodes = document.querySelectorAll(selector);  // Handle CSS selector strings
   }
   this.n = this.nodes[0];  // Store the first element

If selector is a DOM element (it has nodeType), it's wrapped in an array for consistent handling.
If selector is already a NodeList, we use it directly.
If it's a string, we assume it's a CSS selector and use querySelectorAll to select the matching DOM elements.

After determining the type, the first selected element is stored in this.n for quick access.

The each Method:

   each(callback) {
       this.nodes.forEach(node => callback(node));
       return this;  // Allows method chaining
   }

The each method iterates over the selected elements in this.nodes and applies the provided callback function to each one. It returns this so that you can chain multiple methods together.

The addClass Method:

   addClass(classNames) {
       return this.each(node => {
           const classes = classNames.split(",").map(className => className.trim());  // Split and trim class names
           node.classList.add(...classes);  // Add the classes to each element
       });
   }

The addClass method lets you add one or more classes to the selected elements. It takes a string of class names separated by commas, splits them, trims any extra spaces, and applies each class to the elements using classList.add.

Usage Example

With this utility, you can now manipulate the DOM in a simple, readable way, similar to how you would with jQuery:

// Select all elements with the class 'my-element' and add 'new-class' to them
$('.my-element').addClass('new-class');

// You can also chain methods, for example, adding multiple classes
$('.my-element').addClass('class-one, class-two');

Conclusion

This utility function brings a bit of jQuery’s elegance into the world of vanilla JavaScript, making DOM manipulation more intuitive and readable without relying on external libraries. It’s also lightweight and can be easily extended with more methods as needed. While it's not as powerful or comprehensive as jQuery, it covers many everyday tasks in a clean, reusable way.

Feel free to expand this utility with more methods like removeClass, toggleClass, or even css. This way, you’ll have your own mini-framework tailored to your specific needs.

If you found this helpful or have suggestions for improvements, leave a comment below. Let's simplify the DOM manipulation process together!

TicTacToe - the pragmatic way

Frank Wisniewski — Wed, 08 Nov 2023 08:58:14 +0000

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <title>Document</title>
  <style>
    html{
      font-family: system-ui, sans-serif;
    }
    body{
      display:flex;
      flex-direction:column;
      align-items: center;
      width: 360px;
      margin:auto;
    }
    table{
      border-spacing:0px; 
      border-collapse: collapse;
    }
    td{
      box-sizing: border-box;
      display: inline-grid;
      place-items: center;
      width:100px;
      height:100px;
      background:blue;
      font-weight:bold;
      font-size: 4em;
      cursor:pointer;
      user-select: none;  
      margin:2px;
      }
    td:hover{
      background: silver;
    }
    button{
      margin: 1em 0;
      font-size:2em;
      padding: 0.25em 1em;
      font-weight:bold;
    }
    ::backdrop {
      opacity: 0.75;
      backdrop-filter: blur(3px);
    }
  </style>
</head>
<body>
  <h1>TicTacToe</h1>
  <table id=board></table>
  <button>new Game</button>
  <dialog id=dialog>
    <h2 id=winner></h2>
    <form method="dialog">
      <button>OK</button>
    </form>
  </dialog>
  <script>
    var player = "X"
    const clearBoard = () => board.innerHTML = '<tr><td><td><td>'.repeat(3)
    clearBoard()
    board.onclick = (el, cell=el.target) => {
      if (cell.tagName == 'TD' && cell.innerText == ''){
        cell.innerText = player
        cell.style.background = "silver"
        let vert = diaglr = diagrl = ''
        for (let i=0; i<3; i++){
          let row = board.rows[i].cells
          vert += row[cell.cellIndex].textContent
          diaglr += row[i].textContent
          diagrl += row[2-i].textContent
        }
        if ([cell.parentNode.textContent, vert, diaglr, diagrl].includes(player.repeat(3))){
          winner.textContent=`Winner player "${player}" !`
          dialog.showModal()
        } else {
          if(board.textContent.length==9){
            winner.textContent="The game ends in a tie"
            dialog.showModal()
          }
        }
        player = player === 'X' ? 'O' : 'X'
      } 
    }
    document.querySelectorAll('button').forEach( 
      el => el.addEventListener('click', () => 
      clearBoard()))
  </script>
</body>
</html>

This HTML and JavaScript code represents a simple implementation of the Tic-Tac-Toe game. Let me explain the code step by step:

HTML Part:

<!DOCTYPE html>
<html lang="de">
<head>
  <!-- Meta tags for character set and viewport settings -->
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <title>Document</title>
  <!-- Internal CSS styles for the document -->
  <style>
    /* CSS styles for various HTML elements */
  </style>
</head>
<body>
  <!-- Game title and game board rendered as a table -->
  <h1>TicTacToe</h1>
  <table id=board></table>
  <!-- Button to start a new game and a dialog box for displaying game results -->
  <button>new Game</button>
  <dialog id=dialog>
    <h2 id=winner></h2>
    <!-- Form inside the dialog box with an OK button -->
    <form method="dialog">
      <button>OK</button>
    </form>
  </dialog>
  <script>
    // JavaScript code for game logic
  </script>
</body>
</html>

CSS Part:

The CSS styles define the appearance of various HTML elements, including the game board cells, buttons, and dialog box. It sets the layout, colors, and interactions for the Tic-Tac-Toe game.

JavaScript Part:

Initialization:
- var player = "X" initializes the current player as "X".
- const clearBoard = () => board.innerHTML = '<tr><td><td><td>'.repeat(3) clears the game board by resetting the inner HTML of the table to three rows with three empty cells each.
Event Handling:
- board.onclick handles click events on the game board. It checks if a clicked cell is empty and sets it to the current player ("X" or "O"). It then checks for winning conditions in rows, columns, and diagonals. If a player wins, a dialog is displayed with the winner's message. If the game ends in a tie, a tie message is displayed.

document.querySelectorAll('button').forEach(...) adds a click event listener to all buttons in the document. When a button is clicked, it calls the clearBoard function to reset the game board.

// Initialize the current player as "X"
var player = "X";

// Function to clear the game board by resetting HTML content
const clearBoard = () => board.innerHTML = '<tr><td><td><td>'.repeat(3);

// Clear the board when the page loads
clearBoard();

// Event handler for clicks on the game board
board.onclick = (el, cell = el.target) => {
  // Check if the clicked element is a cell and is empty
  if (cell.tagName == 'TD' && cell.innerText == '') {
    // Set the cell text to the current player ("X" or "O")
    cell.innerText = player;
    cell.style.background = "silver";

    // Variables to store values of current row, column, and diagonals
    let vert = diaglr = diagrl = '';

    // Loop through rows to check for winning conditions
    for (let i = 0; i < 3; i++) {
      let row = board.rows[i].cells;
      vert += row[cell.cellIndex].textContent; // Vertical
      diaglr += row[i].textContent; // Diagonal from top-left to bottom-right
      diagrl += row[2 - i].textContent; // Diagonal from top-right to bottom-left
    }

    // Check if any of the winning conditions are met
    if ([cell.parentNode.textContent, vert, diaglr, diagrl].includes(player.repeat(3))) {
      // Display winner message in the dialog box
      winner.textContent = `Winner player "${player}" !`;
      dialog.showModal();
    } else {
      // If the board is full and there is no winner, display a tie message
      if (board.textContent.length == 9) {
        winner.textContent = "The game ends in a tie";
        dialog.showModal();
      }
    }

    // Switch players for the next turn
    player = player === 'X' ? 'O' : 'X';
  }
};

// Event listener for all buttons to start a new game
document.querySelectorAll('button').forEach(
  el => el.addEventListener('click', () =>
    clearBoard())
);

Overall Summary:

This code creates a functional Tic-Tac-Toe game. Players can click on the cells to make their moves, and the game checks for win or draw conditions after each move. The game interface includes a "new Game" button to reset the board and a dialog box to display the game result messages. The styling is kept minimal, focusing on the game functionality.

My little Markdown Parser

Frank Wisniewski — Thu, 20 Apr 2023 11:08:13 +0000

After trying out several Markdown parsers and realizing that the results were quite different at times, I decided to write my own parser from scratch.

The project can be viewed on GitHub and is pretty easy to integrate.

Frank Wisniewski on Github

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="https://frankwisniewski.github.io/mdparser/mini.css">
  <script src="https://frankwisniewski.github.io/mdparser/mdparsershortmin.js"></script>
  <script type="module">
    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
    mermaid.initialize({ startOnLoad: true });
  </script>
  <script>
    MathJax = {
      tex: {
        inlineMath: [['-$', '$-'], ['\\(', '\\)']]
      },
      svg: {
        fontCache: 'global'
      }
    };
  </script>
  <script id="MathJax-script" async
  src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js">
  </script>
</head>
<body>
<div class=container id="markdownContainer"></div>
<script>
"use strict";
async function loadMD(fileName){
  try {
    const req = await fetch( fileName , {
      method: 'get',
      headers: {
        'content-type': 'text/csv;charset=UTF-8'
      }
    });
    if (req.status === 200){
      let markDown = await req.text()
      return markDown
    }
  } catch (err) {console.log(err)}
}
function process(md){
  let mdToHtm = fhwMD( md, {autoid:true, mathjax:true} )
  markdownContainer.innerHTML=mdToHtm; 
}
loadMD("https://corsproxy.io?https://frankwisniewski.github.io/mdparser/beschreibung.md").then( (markdown) => process(markdown))
</script>
</body>
</html>

The function call is as follows: fhwMD( md, {autoid:true, mathjax:true} )

The minified JavaScript code is just under 14 kilobytes in size.

Ripple Effect using JS animation api

Frank Wisniewski — Sat, 23 Jul 2022 10:11:22 +0000

see comments in Source Code

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Ripple sample</title>
  <!-- 
    Pico.css • Minimal CSS Framework for semantic HTML
  -->
  <link rel="stylesheet"
    href="https://unpkg.com/@picocss/pico@latest/css/pico.min.css">
  <style>
    h1{
      font-weight:400;
      text-align:center;
    }
    h2{
      text-align:center;
      font-weight:500;
    }
    button{
      /*
        it is important to use position: relative
      */
      position:relative;
      width:200px;
      font-weight:400;
      text-transform: uppercase;
      margin:0 auto;
      box-shadow: 2px 3px 4px rgba(0,0,0,0.4);
      transition: all 200ms ease;
    }
    button:active{
      box-shadow:none;
    }
  </style>

</head>
<body class=container>

  <hgroup>
    <h1>Ripple</h1>
    <h2>using animation.api</h2>
  </hgroup>

  <button>click me</button>
  <p></p>
  <button class=secondary>click me</button>
  <p></p>
  <button class=contrast>click me</button>

<script>
  "use strict";

  function rippleEffect ( evt ) {
    // get Coordinates from current Button
    let offset = this.getBoundingClientRect(), 
        // create the ripple div
        ripple = document.createElement( 'div' ),
        // save the overflow style from current Button
        aktOverflow = getComputedStyle( this ).overflow,
        // set colors for ripple
        light = `rgba(255,255,255,0)`,
        dark =  `rgba(255,255,255,.3)`,
        // calc the diagonal width from element
        scale = Math.sqrt( 
          ( offset.width*offset.width ) + 
          ( offset.height*offset.height ) )/10;
    // set overflow Button 
    this.style.overflow = 'hidden';
    // style the ripple Element
    ripple.style = `
      width:20px;
      height:20px;
      border-radius: 50%;
      background: radial-gradient(circle, 
      ${dark} 0%, ${light} 5%, ${light} 7%, 
      ${dark} 13%, ${dark} 17%, ${light} 30%, 
      ${light} 35%, ${dark} 51%,${dark} 58%,
      ${light} 68%, ${light} 75%, ${dark} 100%);
      position: absolute;
      opacity: 0;
      transform-origin: 'center center';
      left: ${evt.clientX - offset.left -10}px;
      top: ${evt.clientY - offset.top -10}px;`
    // inject ripple in button
    this.prepend( ripple );
    // create the animate object
    let rippleAni = ripple.animate( [
        { transform: 'scale(0)', opacity:1 },
        { transform: `scale(${scale})`, opacity: .1 }
      ],
      { duration: 600}
    );
    // kill the ripple when animation finished
    Promise.resolve( rippleAni.finished )
      .then( () => { 
        ripple.remove();
        this.style.overflow=aktOverflow;
        }
      );
  }

  document.querySelectorAll( 'button' ).forEach( 
      el => el.addEventListener( 'click', rippleEffect )
  )

</script>
</body>
</html>

TRY IT

Do you need a selector engine like jQuery, Sizzle or something else?

Frank Wisniewski — Thu, 30 Jun 2022 12:50:21 +0000

the following example:

create a ScrollToTop button in vanilla - old school style

"use strict";

  document.addEventListener( 'DOMContentLoaded', function () {

    const scrollButton = document
      .createElementNS( 'http://www.w3.org/2000/svg', 'svg' );

      scrollButton.setAttributeNS( 'http://www.w3.org/2000/xmlns/', 
        'xmlns:xlink', 'http://www.w3.org/1999/xlink' );
      scrollButton.setAttribute( 'viewBox', "0 0 100 100" );

      scrollButton.style.width ='50px'
      scrollButton.style.position = 'fixed'
      scrollButton.style.right = '10px'
      scrollButton.style.bottom = '10px'
      scrollButton.style.zIndex = '1000'
      scrollButton.style.opacity = '0.5'
      scrollButton.style.cursor = 'pointer'
      scrollButton.style.transition = 'all ease 400ms'
      scrollButton.style.display = 'none'

    const myCircle = document
      .createElementNS( 'http://www.w3.org/2000/svg', 'circle' );
      myCircle.setAttribute( 'cx', '50' );
      myCircle.setAttribute( 'cy', '50' );
      myCircle.setAttribute( 'r', '50' );
      myCircle.setAttribute( 'fill', 'red' );

    scrollButton.appendChild( myCircle );

    const myArrow = document
      .createElementNS( 'http://www.w3.org/2000/svg', 'path' );

      myArrow.setAttribute( 'd', 'M50 80 L50 20 M50 20 L80 50 M50 20 L20 50' );
      myArrow.setAttribute( 'stroke', 'white' );
      myArrow.setAttribute( 'stroke-width', '15' );
      myArrow.setAttribute( 'stroke-linecap', 'round' );

    scrollButton.appendChild( myArrow );

    scrollButton.addEventListener( 'mouseover', 
      () => scrollButton.style.opacity = '1'
    );

    scrollButton.addEventListener( 'mouseout', 
      () => scrollButton.style.opacity = '.3'
    );

    scrollButton.addEventListener( 'click',  () => document
      .querySelector( 'body' )
      .scrollIntoView( { behavior: 'smooth' } )
    );

    document.body.appendChild( scrollButton );

    window.onscroll = () =>
      scrollButton.style.display =
          ( document.querySelector( 'html' ).scrollTop / 
           ( document.querySelector( 'html' ).scrollHeight - 
            document.querySelector( 'html' ).clientHeight ) ) > 0.25
        ? '' : 'none';

  })

now the same solution using a selector engine.
In this example I used my own engine, it doesn't matter for the comparison.

<script type="text/javascript" src="https://w-web.de/myquery/myquery-min.js"></script>

<script type="text/javascript" src="https://w-web.de/myquery/myquery.js"></script>

"use strict";
$().ready( () => {

    let scrollButton = 
      $().sCreate( '0 0 100 100' )

      .styles()
        .width(  '50px' ).position( 'fixed' )
        .right( '10px' ).bottom( '10px' )
        .zIndex( '1000' ).opacity( '0.3' )
        .cursor( 'pointer' ).transition( 'all ease 400ms' )
        .display( 'none' ).parent()

      .sAppend( 
        $().sCircle( 50, 50, 50 ).fill( 'red' ) )

      .sAppend(
        $().sPath( 'M50 80 L50 20 M50 20 L80 50 M50 20 L20 50' )
          .shortStroke( 'white' , '15', 'round' ) )

      .on( 'mouseover', function (){ this.style.opacity = '1' } )

      .on( 'mouseout', function (){ this.style.opacity = '.3' } )

      .click( () => $( 'body' ).n.scrollIntoView( { behavior: 'smooth' } ) )

      .appendEnd( $( 'body' ) )

    $(window).on('scroll', () => 
        scrollButton.n.style.display =
          ( $('html').n.scrollTop / 
           ( $('html').n.scrollHeight - 
             $('html').n.clientHeight ) ) > 0.25
        ? '' : 'none'
    ) 
  })

Advantages of a SelectorEngine

shorter code
Chaining

Disadvantages

greater learning effort

I think that if you have to deal with a lot of changing employees in a team, the vanilla JS solution certainly makes more sense.

If you are a lone fighter, you should use a Selector Engine.

what is your opinion?

Let's create our own selector library.

Frank Wisniewski — Mon, 13 Jun 2022 09:58:24 +0000

The basic framework:

<!DOCTYPE html>
<html lang=de>
  <meta charset=UTF-8>
  <title>myDemo</title>
  <style>
    .blue{
      color:blue;
    }
    .pointer{
      cursor:pointer;
    }
  </style>
  <h1>Selector</h1>
  <p>lorem 1</p>
  <p>lorem 2</p>
<script> 
"use strict";
const $ = function ( selector = null ) {
  class selection {
    constructor( selector ) {    
      if ( selector ) {
        this.nodes =
         selector === document ? [document] :
         selector === window ? [window] :
         selector.nodeType ? [selector] :
         selector.constructor.name==this.constructor.name ? selector.nodes :
         NodeList.prototype.isPrototypeOf( selector ) ? selector :
         document.querySelectorAll( selector )
         this.toNode=this.nodes[0] 
      }
    }

    each = callback => ( this.nodes.
      forEach( ( _node, index ) => 
        callback( _node, index )
      ), this)

    addClass = ( ...classes ) => this
      .each( _node =>
        _node.classList.add( ...classes ) )

    removeClass = ( ...classes ) => this
      .each( _node =>
        _node.classList.remove( ...classes ) )

    click = callBack => this
      .each( ( _node ) => _node
      .addEventListener( 'click' , callBack ) )

  }
  return selector = new selection( selector )
}

$( 'p' )
  .addClass( 'blue', 'red' )
  .addClass( 'white' )
  .removeClass( 'white', 'red' )
  .click( ( el ) => console.log(
    el.currentTarget.textContent
  ))
  .addClass( 'pointer' )

</script>

Write your suggestions and code for the extension in the comments:

create table from array of objects in one line of code

Frank Wisniewski — Sun, 05 Jun 2022 15:42:25 +0000

<html lang=de>
  <meta charset=UTF-8>
  <title>Document</title>
 <link rel="stylesheet" 
href="https://unpkg.com/@picocss/pico@latest/css/pico.min.css">
<body class=container>
  <h1>Array of objects to table</h1>
<script>
  let cities = [
  {"city": "Berlin","country": "Germany"},
  {"city": "Paris","country": "France"}]
  document.querySelector('h1').insertAdjacentHTML('afterend',
  `<table><thead><tr><th>
   ${Object.keys(cities[0]).join('<th>')}
  </thead><tbody><tr><td>${cities.map(e=>Object.values(e)
.join('<td>')).join('<tr><td>')}</table>`)
</script>

search through a table in one line of code

Frank Wisniewski — Sun, 05 Jun 2022 08:44:48 +0000

One Line of code

<!DOCTYPE html>
<html lang=de>
  <meta charset=UTF-8>
  <title>Document</title>
  <link rel=stylesheet 
    href="https://unpkg.com/@picocss/pico@latest/css/pico.min.css">
<body class=container>
  <h1>filter table</h1>
  <input type=search id=F>
  <table>
    <thead>
      <tr><td>City<td>Einwohner
      <tbody id=EW>
        <tr><td>Berlin<td>3748148
        <tr><td>Hamburg<td>1891810
        <tr><td>München<td>1471508
        <tr><td>Köln<td>1085664
        <tr><td>Frankfurt am Main<td>753056
        <tr><td>Stuttgart<td>634830
        <tr><td>Düsseldorf<td>619294
        <tr><td>Leipzig<td>587854
  </table>
    <script>
      F.onkeyup=e=>[...EW.rows].map(e => e.style
       .display=[...e.cells]
        .map(e => e.innerText)
        .join(';').match(RegExp(F.value,'i'))?'':'none');  
    </script>

Responsive slider

Frank Wisniewski — Fri, 06 May 2022 14:16:30 +0000

solved with flex-box

<!DOCTYPE html>
<html lang=de>
  <meta charset=UTF-8>
  <title>Document</title>
  <style>
    body{
      font-family:system-ui, sans-serif,sans-serif; 
    }
    .fhwslider {
      width: 90%;
      margin:auto;
      position: relative;
      overflow: hidden;
      background: black;
      display: flex;
      flex-direction: row;  
    }
    .fhwslider h2, .fhwslider p{
      color:white;
      padding: 0em 10% 0 10%;
      text-align: center;
    }
    .fhwslider div {  
      min-width:100%;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
      align-content: center;
      transform: translateX(-100%);
      animation: fhwsliderani 24s ease-in-out 0s infinite;
    }
    .fhwslider > div:nth-child(1) {
      animation-delay: -4s;
    }
    .fhwslider > div:nth-child(2) {
      animation-delay: 4s;
      margin-left:-100%;
    }
    .fhwslider > div:nth-child(3) {
      animation-delay: 12s;
      margin-left:-100%;
    }
    @keyframes fhwsliderani {
      8.33333% {transform: translateX(0);}
      33.3333337% {transform: translateX(0);}
      41.6666667% {transform: translateX(100%);}
      100% {transform: translateX(100%);}
    }
  </style>
  <h1>responsive Slider</h1>  
  <h2>solved with flexbox</h2>  
  <div class=fhwslider>
    <div>
      <h2>Lorem1</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque molestiae voluptatibus consequuntur aperiam minima iure repudiandae mollitia accusamus vel explicabo.
    </div>
    <div>
      <h2>Lorem 2</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque molestiae voluptatibus consequuntur aperiam minima iure repudiandae mollitia accusamus vel explicabo.
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque molestiae voluptatibus consequuntur aperiam minima iure repudiandae mollitia accusamus vel explicabo.
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque molestiae voluptatibus consequuntur aperiam minima iure repudiandae mollitia accusamus vel explicabo.
    </div>
    <div>
      <h2>Lorem 3</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque molestiae voluptatibus consequuntur aperiam minima iure repudiandae mollitia accusamus vel explicabo.
    </div>
</div>
<p>Lorem ipsum dolor sit amet.

tricky css selector

Frank Wisniewski — Thu, 05 May 2022 15:32:55 +0000

alternative to jQuerys nextUntil()

Today I encountered a seemingly simple problem:

the paragraphs under each header h2 need a different text color
- sample1-1 to sample1-3 -> blue
- sample2-1 to sample2-2 -> red
- sample3-1 -> green
a click on h2 must toggle display the direct following paragraphs

<!DOCTYPE html>
<html lang=en>
  <meta charset=UTF-8>
  <title>Document</title>
  <h1>Sample</h1>
    <h2>sample-1</h2>
      <p>sample1-1
      <p>sample1-2
      <p>sample1-3
    <h2>sample-2</h2>
      <p>sample2-1
      <p>sample2-2
    <h2>sample-3</h2>
      <p>sample3-1
  <h3>Note</h3>
  <p>the paragraphs under each header2
  <p>need a different text color 
  <p>test1-1 to test1-3 -> blue
  <p>test2-1 to test2-2 -> red
  <p>test3-1 -> green
  <p>a click on h2 must toggle display the direct
  <p>following paragraphs

OK, let's start with the colors,
and write some simple css rules,
the General Sibling Selector (~)
is my friend :-):

h2:first-of-type~p {color:blue}
h2:nth-of-type(2)~p {color:red}
h2:nth-of-type(3)~p {color:green}

Done, the colors under the respective h2 are correct. Unfortunately, the paragraphs under the following h3 also turn green.
I didn't consider that the General Sibling Selector (~) selects all following paragraphs.

What should I do?

i need the first h2 Element h2:nth-of-type(1)
all the following paragraphs ~p
but not the following paragraphs behind the second h2

OK, at first i try to select all following paragraphs after the second h2

select all behind the first h2 h2:nth-of-type(1)~*
but not p (this selects only the headers h2,h2,h3)
but i need the following paragraphs with ~p
summarized h2:nth-of-type(1)~*:not(p)~p

So the complete selector looks like this:

h2:nth-of-type(1)~p:not(h2:nth-of-type(1)~*:not(p)~p)

and the css for coloring the paragraphs

h2:nth-of-type(1)~p:not(h2:nth-of-type(1)~*:not(p)~p){
  color:blue;
}
h2:nth-of-type(2)~p:not(h2:nth-of-type(2)~*:not(p)~p){
  color:red;
}
h2:nth-of-type(3)~p:not(h2:nth-of-type(3)~*:not(p)~p){
  color:green;
}

the problem toggle display

give h2 a pointer cursor and create a class to toggle display

h2{
  cursor: pointer;
  user-select:none;
}
.no-display{
  display:none;
}

The rest is no longer a real problem because we already created the appropriate selectors in the previous step:

"use strict";

  document.querySelectorAll('h2')
    .forEach(( node, index ) =>
      node.addEventListener ( 'click', () =>
        document.querySelectorAll(
        `h2:nth-of-type(${index+1})~p:not(h2:nth-of-type(${index+1})~*:not(p)~p)`
        )
          .forEach(node => node.classList.toggle('no-display'))
      )
  )

The complete code:

<!DOCTYPE html>
<html lang=de>
  <meta charset=UTF-8>
  <title>Document</title>
  <style>

    h2:nth-of-type(1)~p:not(h2:nth-of-type(1)~*:not(p)~p){
      color:blue;
    }
    h2:nth-of-type(2)~p:not(h2:nth-of-type(2)~*:not(p)~p){
      color:red;
    }
    h2:nth-of-type(3)~p:not(h2:nth-of-type(3)~*:not(p)~p){
      color:green;
    }

    h2{
      cursor: pointer;
      user-select:none;
    }
    .no-display{
      display:none;
    }

  </style>
  <h1>Sample</h1>
    <h2>Test-1</h2>
      <p>test1-1
      <p>test1-2
      <p>test1-3
    <h2>Test-2</h2>
      <p>test2-1
      <p>test2-2
    <h2>Test-3</h2>
      <p>test3-1
  <h3>Note</h3>
  <p>the paragraphs under each header2
  <p>need a different text color 
  <p>test1-1 to test1-3 -> blue
  <p>test2-1 to test2-2 -> red
  <p>test3-1 -> green
  <p>a click on h2 must toggle display the direct
  <p>following paragraphs

  <script>
  "use strict";

  document.querySelectorAll('h2')
    .forEach(( node, index ) =>
      node.addEventListener ( 'click', () =>
        document.querySelectorAll(
        `h2:nth-of-type(${index+1})~p:not(h2:nth-of-type(${index+1})~*:not(p)~p)`
        )
          .forEach(node => node.classList.toggle('no-display'))
      )
  )

  </script>

JS .animate()

Frank Wisniewski — Sat, 09 Apr 2022 14:49:00 +0000

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="https://w-web.de/myquery/myquery-min.js"></script>
  <link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.min.css">
  <style>
    header{
      position:relative;
      display:flex;   
      height:150px;
      flex-direction: column;
      flex-wrap: nowrap;
      justify-content: center;
      align-content: center;
      align-items: center;
        overflow:hidden;
    }
    header p{
      font-size:1.75em;
      font-weight:bold;
      font-family: "Arial Black";
      color:white;
      text-align:center;
      text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
             0px 8px 13px rgba(0,0,0,0.1),
             0px 18px 23px rgba(0,0,0,0.1);
      margin:0;
      padding:0;

    }
    .bg-color{
      position:absolute;
      background: linear-gradient(to right, #4A00E0, #8E2DE2); 
      height:150px;
      width: 100%;
      z-index:-2;
    }
  </style>
</head>
<body>
  <main class=container>
  <header>
      <p>Animated Backgound<br>JS.animate()
      <div class="bg-color"></div>
  </header>
  <h1>Lorem ipsum.</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste alias modi voluptatem voluptatibus ab, inventore tenetur iure veniam incidunt neque.</p>
  </main>
  <script>
  "use strict";
  function randomAni ( mySel, count=50 ) {  
    const myAni = function ( evt, el ){
      const getNewBallPosition = function ( el ) {
        let {top,left,width,height} = el.getBoundingClientRect()
        let pCoord = $(el).parent().n.getBoundingClientRect()
        let newTop = Math.random()*(pCoord.height-height)
        let newLeft = Math.random()*(pCoord.width-width)
        left = left-pCoord.left
        top = top-pCoord.top
        let hyp = Math.hypot((newLeft-left), (newTop-top))
        return{left, top, newLeft, newTop, hyp}
      }
      //is first call?
      let aktEl = el ? el : this.effect.target
      var {left,top,newLeft,newTop,hyp} = getNewBallPosition(aktEl)
      //new Elements....
      if (el){
        let pCoord = $(el).parent().n.getBoundingClientRect()
        let {width, height} = el.getBoundingClientRect()
        left=Math.random()*(pCoord.width-width)
        top=Math.random()*(pCoord.height-height)
        hyp = Math.hypot((newLeft-left), (newTop-top))
      }
      let myKeyframes = [
        { transform: `translate3d(${left}px,${top}px,0)` },
        { transform: `translate3d(${newLeft}px, ${newTop}px,0)` }
      ]
      let myOptions = {
        direction: "normal",
        fill: "both",
        iterations: 1
      }
      myOptions.duration=hyp*aktEl.dataset.speed
      let myAnimation = aktEl.animate(myKeyframes, myOptions)
      myAnimation.addEventListener('finish', myAni, { once: true })
    }
    for (let i=1; i<=count; i++){
      let width = (Math.random() * 30) + 5;
      myAni(null, 
        $(
        $(mySel)
        .append('div')
        .setData('speed', (Math.random() * 80) + 20)
        .addClass('myAni')
        .styles()
          .position('absolute')
          .borderRadius(`${(Math.random() * 50) + 1}%`)
          .zIndex('-1')  
          .top('0px')
          .left('0px')
          .width(`${width}px`)
          .height(`${width}px`)
          .border(`1px solid ${['white', '#eee','#ddd','#ccc', '#bbb'][Math.floor(Math.random()*5)]}`)
          .opacity('.5')
        .parent()
      ).n)
    }
  }
  randomAni('header')
  </script>
</body>
</html>

the documented source code of my-query

the gzipped myquery-min.js version needs under 3K