{"id":191217,"date":"2014-12-19T02:25:41","date_gmt":"2014-12-19T09:25:41","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=191217"},"modified":"2021-08-04T08:29:26","modified_gmt":"2021-08-04T15:29:26","slug":"str-replace-function","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/snippets\/sass\/str-replace-function\/","title":{"rendered":"Str-replace Function"},"content":{"rendered":"\n<p>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 <code>str-replace<\/code> function if you ever need one.<\/p>\n\n\n\n<pre rel=\"SCSS\" class=\"wp-block-csstricks-code-block language-scss\" data-line=\"\"><code markup=\"tt\">\/\/\/ Replace `$search` with `$replace` in `$string`\n\/\/\/ @author Kitty Giraudel\n\/\/\/ @param {String} $string - Initial string\n\/\/\/ @param {String} $search - Substring to replace\n\/\/\/ @param {String} $replace ('') - New value\n\/\/\/ @return {String} - Updated string\n@function str-replace($string, $search, $replace: '') {\n  $index: str-index($string, $search);\n  \n  @if $index {\n    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);\n  }\n  \n  @return $string;\n}<\/code><\/pre>\n\n\n\n<p>Usage:<\/p>\n\n\n\n<pre rel=\"SCSS\" class=\"wp-block-csstricks-code-block language-scss\" data-line=\"\"><code markup=\"tt\">.selector {\n  $string: 'The answer to life the universe and everything is 42.';\n  content: str-replace($string, 'e', 'xoxo');\n}<\/code><\/pre>\n\n\n\n<p>Result:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.selector {\n  content: \"Thxoxo answxoxor to lifxoxo thxoxo univxoxorsxoxo and xoxovxoxorything is 42.\";\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>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. Usage: Result:<\/p>\n","protected":false},"author":40123,"featured_media":0,"parent":191187,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-snippet.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":7435,"url":"https:\/\/css-tricks.com\/snippets\/javascript\/htmlentities-for-javascript\/","url_meta":{"origin":191217,"position":0},"title":"htmlEntities for JavaScript","date":"September 14, 2010","format":false,"excerpt":"htmlentities() is a PHP function which converts special characters (like <) into their escaped\/encoded values (like &lt;). This allows you to show to display the string without the browser reading it as HTML. JavaScript doesn't have a native version of it. If you just need the very basics to so\u2026","rel":"","context":"With 29 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":163745,"url":"https:\/\/css-tricks.com\/snippets\/jquery\/get-query-params-object\/","url_meta":{"origin":191217,"position":1},"title":"Get Query Params as Object","date":"February 22, 2014","format":false,"excerpt":"Nicholas Ortenzio wrote this little plugin: jQuery.extend({ getQueryParameters : function(str) { return (str || document.location.search).replace(\/(^\\?)\/,'').split(\"&\").map(function(n){return n = n.split(\"=\"),this[n[0]] = n[1],this}.bind({}))[0]; } }); So if the URL is: http:\/\/codepen.io\/chriscoyier\/pen\/uszCr?lunch=sandwich&dinner=stirfry You can do: var queryParams = $.getQueryParameters(); And queryParams will be an object like: { \"lunch\": \"sandwich\", \"dinner\": \"stirfry\" }","rel":"","context":"With 21 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":192772,"url":"https:\/\/css-tricks.com\/snippets\/sass\/sorting-function\/","url_meta":{"origin":191217,"position":2},"title":"Sorting Function","date":"January 9, 2015","format":false,"excerpt":"Sass does not provide any built-in way to sort a list of values. Thanks to string manipulation functions, we can build a function to sort a list of items following a given order. If values to be sorted are numbers and numbers only, it ends up being quite easy because\u2026","rel":"","context":"With 2 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":15580,"url":"https:\/\/css-tricks.com\/snippets\/php\/convert-accented-characters\/","url_meta":{"origin":191217,"position":3},"title":"Convert Accented Characters","date":"December 14, 2011","format":false,"excerpt":"For instance, if you want to use a string as part of a URL but need to make it safe for that kind of use. function replace_accents($str) { $str = htmlentities($str, ENT_COMPAT, \"UTF-8\"); $str = preg_replace('\/&([a-zA-Z])(uml|acute|grave|circ|tilde);\/','$1',$str); return html_entity_decode($str); }","rel":"","context":"With 9 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":5091,"url":"https:\/\/css-tricks.com\/snippets\/javascript\/comma-values-in-numbers\/","url_meta":{"origin":191217,"position":4},"title":"Put Comma Values in Numbers","date":"December 19, 2009","format":false,"excerpt":"This function assumes what is being submitted to it is a string, with a decimal point and two places after the decimal. To get your number into that format first, use this. Then this function will properly comma separate the number. For example, 2345643.00 will return 2,345,643.00 function CommaFormatted(amount) {\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":5948,"url":"https:\/\/css-tricks.com\/snippets\/jquery\/search-replace\/","url_meta":{"origin":191217,"position":5},"title":"Search\/Replace","date":"March 15, 2010","format":false,"excerpt":"jQuery(function () { jQuery(\":contains(FIND)\").not(\":has(:contains(FIND))\").each(function () { var that = $(this), html = that.html(); html = html.replace(\/(\\(FIND:.*?\\))\/g, \"REPLACE-WITH\"); that.html(html); }); });","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/191217"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/40123"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=191217"}],"version-history":[{"count":8,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/191217\/revisions"}],"predecessor-version":[{"id":346074,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/191217\/revisions\/346074"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/191187"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=191217"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=191217"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}