Str-replace Function

Sass provides a collection of handy functions to manipulate strings, however there is no function to replace a substring with another string. Here is a quick str-replace function if you ever need one.

/// Replace `$search` with `$replace` in `$string`
/// @author Kitty Giraudel
/// @param {String} $string - Initial string
/// @param {String} $search - Substring to replace
/// @param {String} $replace ('') - New value
/// @return {String} - Updated string
@function str-replace($string, $search, $replace: '') {
  $index: str-index($string, $search);
  
  @if $index {
    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
  }
  
  @return $string;
}

Usage:

.selector {
  $string: 'The answer to life the universe and everything is 42.';
  content: str-replace($string, 'e', 'xoxo');
}

Result:

.selector {
  content: "Thxoxo answxoxor to lifxoxo thxoxo univxoxorsxoxo and xoxovxoxorything is 42.";
}

Comments

Mike iLL

# June 15, 2016

Sweet, man. Thank you. I used in some code to generate svg + gradient backgrounds:

http://codepen.io/MikeiLL/pen/mEPKYG

Robert Wildling

Permalink to comment# September 27, 2016

Very nice!!! Thanks for sharing!

Loading...
Lara Schenck

Permalink to comment# January 8, 2019

It looks like there is a typo in the snippet (or the Sass functions have changed since 2014…likely) – they should be str_index and str_slice with underscores instead of hyphens!

Loading...
Crolug

Permalink to comment# July 18, 2020

I don’t know which version Codepen uses, but newest Sass uses namespaces for built-in modules now, so: string.index, map.has-key, etc. plus @use 'sass:string, @use 'sass:map, at the beginning of the file.

Loading...

Sonja

# February 22, 2018

Very awesome! Using this to generate buttons from several corresponding color-maps.

David Brogan

# December 14, 2018

Thanks so much! Using to change file names on a mixin that plugs in 2x res images on retina.

Jason Lusk

# September 17, 2019

should change
@if ($index and str-length($search) > 0) {
to
@if ($index and str-length($search) > 0) {
to account for empty search parameter.

Jason Lusk

# September 17, 2019

oops
@if ($index) {
to
@if ($index and str-length($search) > 0) {

Anson

# September 24, 2020

I recently switched a project from node-sass to dart-sass, and it looks like this implementation gave me a stack overflow error once the amount of replacements went over 120 or so (I use this function to url-encode svgs!). I’m assuming it has to do with the recursion.

Here is a version without recursion that does not seem to give me any issues and seems to work in my use-cases. Please let me know if there are any use-cases this fails on as I haven’t gone through exhaustive tests.

@function str-replace($string, $search, $replace: '') {

  $index: str-index($string, $search);

  @if $index{

    $searchString: $string;
    $newString: "";
    $end: "";

    @while $index {
      $start: str-slice($searchString, 1, $index - 1);
      $end: str-slice($searchString, $index + str-length($search));
      $searchString: $end;
      $index: str-index($searchString, $search);
      $newString: $newString + $start + $replace;
    }
    @return $newString + $end;
  }
  @return $string;
}

David Griffiths

# August 9, 2022

For anyone using Bootstrap, please note this function is used in bs5, inside _functions.scss

I ran into problems as I re-used this code later on in my app and changed it somewhat; I needed to return some lower case strings and should have namespaced my version, as I ended up with some pretty whack svgs!

Anyways, just a heads-up for anyone using Bootstrap.

Thanks Kitty, for the code :-)

Luis Fernando Lobo Damasceno

# November 25, 2024

“str-index, str-slice, and str-length have been deprecated, so I just updated (11/25/2024):

`@use ‘sass:string’;

@function str-replace($string, $search, $replace: ”) {
$index: string.index($string, $search);

@if $index {
@return string.slice($string, 1, $index – 1) + $replace + str-replace(string.slice($string, $index + string.length($search)), $search, $replace);
}

@return $string;
}`

Comments

Leave a Reply Cancel reply