Hello, censored-style.js!

censored-style.js is a JavaScript library that allows you to apply a censorship-like style to specific text. Since it uses Web Components, it can be used with any framework, including React, Vue, and Svelte. Of course, it can also be used with Vanilla JS.

Playground

See the Pen by Kilimanjaro (@Kilimanjaro-a2) on CodePen.

There are many different types of Censorship.

• This is a default black marker style: This is a censored text!
• This is a color changed version: This is a censored text!.
• This is a blur style: This is a censored text!.
• This is a strikethrough style: This is a censored text!.
• This is a caligraphy style: This is a censored text!.

Convenient functionalities are also available.

• You can change the tags surrounding the text to be censored as you wish.
• The functionality of censored-style.js is encapsulated in Web Components, so it does not affect existing HTML elements that are not enclosed in <censored-style> tags like this text.
• It is also possible to replace the part you want to censor with any string of text.
  (example 1: "censored" => "********") This is a censored text.
  (example 2: "censored" => "[REDACTED]") This is also a censored text.
• You can set whether or not to release the censored state on hover like this: This is a censored text!