Sass 提供了一系列方便的函数来操作字符串,但是没有函数可以将子字符串替换为另一个字符串。如果您需要,这里有一个快速str-replace
函数。
/// 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;
}
用法
.selector {
$string: 'The answer to life the universe and everything is 42.';
content: str-replace($string, 'e', 'xoxo');
}
结果
.selector {
content: "Thxoxo answxoxor to lifxoxo thxoxo univxoxorsxoxo and xoxovxoxorything is 42.";
}
太棒了,谢谢。我在一些生成 svg + 渐变背景的代码中使用了它
http://codepen.io/MikeiLL/pen/mEPKYG
非常好!感谢分享!
看起来代码片段中有一个错别字(或者 Sass 函数自 2014 年以来发生了变化……很可能)——它们应该是
str_index
和str_slice
,使用下划线而不是连字符!我不知道 Codepen 使用哪个版本,但最新的 Sass 现在对内置模块使用命名空间,所以:
string.index
、map.has-key
等,加上@use 'sass:string
、@use 'sass:map
,在文件开头。太棒了!用它来从几个对应的颜色映射生成按钮。
非常感谢!用于在混合中更改文件名,该混合在视网膜上插入 2 倍分辨率图像。
应该更改
@if ($index and str-length($search) > 0) {
到
@if ($index and str-length($search) > 0) {
以考虑空搜索参数。
糟糕
@if ($index) {
到
@if ($index and str-length($search) > 0) {
我最近将一个项目从 node-sass 切换到 dart-sass,看起来这个实现一旦替换次数超过 120 次左右就会给我一个堆栈溢出错误(我使用此函数对 svg 进行 url 编码!)。我假设这与递归有关。
这是一个没有递归的版本,它似乎没有给我任何问题,并且似乎在我的用例中有效。如果此版本在任何用例中失败,请告诉我,因为我还没有进行详尽的测试。
对于任何使用 Bootstrap 的人,请注意此函数在 bs5 中使用,位于 _functions.scss 中
我在我的应用程序中稍后重用此代码并对其进行了更改时遇到了问题;我需要返回一些小写字符串,并且应该为我的版本命名空间,因为我最终得到了一些非常奇怪的 svg!
总之,只是提醒一下任何使用 Bootstrap 的人。
感谢 Kitty 提供的代码 :-)