npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

replace-in-html

v1.0.3

Published

Replace text in HTML strings without messing up element attributes.

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

trending-potatotrending-potato

Keywords

htmlreplacefind and replace

Readme

replace-in-html

Replaces text in an HTML fragment without replacing attributes. Only works in a browser (or JSDOM).

Examples

replaceInHtml(`<a href="https://meow.example.org">meow</a>`, "meow", `<img src="./cat.png">`);
// <a href="https://meow.example.org"><img src="./cat.png"></a>

replaceInHtml(
  `<p class="me">Nested elements and regexps: <span>replace <b>me!</b></span> <span>and me!</span></p>`,
  /(?<!\w)me/g, // negative lookbehind,
  "without replacing \"me\" in \"elements\"",
);
// <p class="me">Nested elements and regexps: <span>replace <b>without replacing "me" in "elements"!</b></span> <span>and without replacing "me" in "elements"!</span></p>

replaceInHtml(
  `<div><code>replacer</code> can be a string or a function returning $return_types</div>`,
  /\$return_types/g,
  match => {
    const el = document.createElement("span");
    el.className = match.slice(1);
    el.innerHTML = "a string, DOM Node or an array of DOM Nodes";

    return el;
  },
);
// <div><code>replacer</code> can be a string or a function returning <span class="return_types">a string, DOM Node or an array of DOM Nodes</span></div>

replaceInHtml(
  `<p>So let's try an example closer to the real world:question:</p>
  <p>How about... :lightbulb: custom emoji tags? :blobcat:</p>`,
  /:[a-zA-Z0-9_]{2,}:/g,
  match => {
    const el = document.createElement("img");
    el.className = "custom_emoji";
    el.alt = el.title = match;
    el.src = `https://cdn.example.org/i/emoji/${match.slice(1, -1)}.png`;

    return el;
  },
);
// <p>So let's try an example closer to the real world<img class="custom_emoji" title=":question:" alt=":question:" src="https://cdn.example.org/i/emoji/question.png"></p>
// <p>How about... <img class="custom_emoji" title=":lightbulb:" alt=":lightbulb:" src="https://cdn.example.org/i/emoji/lightbulb.png"> custom emoji tags? <img class="custom_emoji" title=":blobcat:" alt=":blobcat:" src="https://cdn.example.org/i/emoji/blobcat.png"></p>

Installation

Webpack / Rollup

NPM:

npm install replace-in-html

Yarn:

yarn add replace-in-html

then in JS:

import replaceInHtml from "replace-in-html";

const replaced = replaceInHtml("<p>original html</p>", /original/g, "modified");
console.log(replaced);

Browser

<script src="https://unpkg.com/[email protected]/dist/replace-in-html.js"></script>
<script>
  const replaced = window.replaceInHtml.default("<p>original html</p>", /original/g, "modified");
  console.log(replaced);
</script>

Usage

replaceInHtml(html, search, replacer)
  • html: a string containing the HTML to perform the replacing on (note that it can't be a document with <html>, <head> or <body>; it should only contain elements that go inside <body>)
  • search: a string or RegExp to replace (don't forget /g in the regular expression if you want to find all matching substrings!)
  • replacer: either an HTML string to replace with; or a function that accepts the matching text and returns an HTML string, a Node (e. g. created using document.createElement(name)) or an array of Nodes

Returns an HTML string.

How it works

replace-in-html uses DOMParser to parse your HTML into an isolated document that doesn't have access to your page; traverses it, replaces any matching text and returns the resulting body. It's safe, small and decently fast. (Note that if you're processing user-generated HTML, you still have to sanitize it.)