Skip to content
SnapDOMGitHub★ 8K
@zumer/snapdom-plugins · MIT

Replace text in the capture.

Replaces DOM text in the clone using strings or regular expressions. Stylesheet and script text are left unchanged.

npm install @zumer/snapdom@latest @zumer/snapdom-plugins@latest

Usage

import { snapdom } from '@zumer/snapdom';
import { replaceText } from '@zumer/snapdom-plugins/replace-text';

const el = document.querySelector('#target');
const result = await snapdom(el, {
  plugins: [replaceText({
    replacements: [
      { find: 'DRAFT', replace: 'APPROVED' },
      { find: /\d{4}-\d{2}-\d{2}/, replace: '[REDACTED]' }
    ]
  })]
});
const image = await result.toPng();
document.body.append(image);

Options

OptionTypeDefaultDescription
replacementsArray<{ find: string|RegExp, replace: string }>[]List of find/replace pairs
Try it here

Live element

Component preview
Capture an editable component
1,284+12% vs last week

Editable text and an open shadow root can be captured together.

Result

Nothing captured yet

Edit the title, then run. This uses the real library from unpkg.