神奇的str.replace()

神奇的str.replace()

在此之前，我对replace的用法就局限于替换掉字符串中的某些字符，比如’hello, 世界’.replace(‘hello’, ‘你好’)，因为没有遇到过更复杂的需求，也没有去深究，几天前收到一个需求：把一个字符串中的数字加粗且换成蓝色，比如“共为您找到符合条件的数据83条”。

刚看到需求我脑海中就跳出来了一个解决办法，即将数字（83）两端加上一个带有样式的span标签，于是我高高兴兴的去把代码实现了。

<style>
    .special {
        font-weight: bolder;
        color: #0062B2;
    }
</style>
<script>
    let str = '共为您找到符合条件的数据83条。'
    const result = document.querySelector("#result")
    str = str.replace('数据', '数据<span class="special">').replace('条。', '</span>条。')
    result.innerHTML = str
</script>

• 运行结果
  

效果也确实实现了，但是突然说将显示的字符串改为共为您找到符合条件的数据103家83条。，仍然是将数字特殊化处理，当然这里可以继续像上面一样修改，但是如果每一次都需要按照对应的格式来改岂不是很麻烦，于是我想着将字符串中的数字两端加上span标签，于是js代码如下

function handleStr(str) {
    // 找出数字
    let nums = str.match(/[0-9]+/g)
    // 去重
    nums = new Set(nums)
    // 循环替换
    return [...nums].reduce((prev, curr) => {
        return prev.replace(new RegExp(curr, 'g'), `<span class="special">${curr}</span>`)
    }, str)
}
let str = '共为您找到符合条件的数据103家83条。'
const result = document.querySelector("#result")
str = handleStr(str)
result.innerHTML = str

• 运行结果
  

果然后面又说再加上一个“有效数据70条”，即原字符串改为“共为您找到符合条件的数据103家83条，有效数据70条。”，加上去之后不需要再进行代码修改，接口数据改变即可

• 运行结果
  

我们效果是达到了，也适应了各种情况，但是后来才发现代码仍然可以进行修改，这就要说到今天的主角replace的使用方法了，这里就懒得去复制粘贴了，replace详细教程可以移步。于是我们的代码可以做如下修改

let str = '共为您找到符合条件的数据103家83条，有效数据70条'
const result = document.querySelector("#result")

str = str.replace(/[0-9]+/g, '<span class="special">$&</span>')

result.innerHTML = str

如此即可将handleStr方法简化成一句，之前写过的一个js对象转为css样式的方法也可以做如下修改

/**
 * 根据驼峰字符串生成css属性的键
 * @param camelCaseName
 * @returns {string}
 */
const getCssAttrName = (camelCaseName) => {
  if (typeof camelCaseName !== 'string' || camelCaseName === '') {
    return ''
  }
  // 获取所有的大写字符
  let upperCaseChars = camelCaseName.match(/[A-Z]/g)
  // 去除重复的项
  upperCaseChars = [...(new Set(upperCaseChars))]
  // 循环将大写字母换为 “-?”的格式
  upperCaseChars.forEach(char => {
    camelCaseName = camelCaseName.replace(new RegExp(char, 'g'), `-${char.toLocaleLowerCase()}`)
  })
  return camelCaseName
}
/**
 * 根据css对象生成相应的css字符串
 * @param obj
 * @returns {string}
 */
const cssFromObj = (obj) => {
  if (typeof obj === 'object' && obj !== null) {
    const cssArr = []
    Object.keys(obj).forEach(key => {
      cssArr.push(`${getCssAttrName(key)}: ${obj[key]};`)
    })
    return cssArr.join('')
  }
  return ''
}

/* 修改后 */

/**
 * 根据css对象生成相应的css字符串
 * @param obj
 * @returns {string}
 */
const cssFromObj1 = (obj) => {
  if (typeof obj === 'object' && obj !== null) {
    const cssArr = []
    Object.keys(obj).forEach(key => {
      cssArr.push(`${key.replace(/([A-Z])/g, (_, k1) => '-' + k1.toLowerCase())}: ${obj[key]};`)
    })
    return cssArr.join('')
  }
  return ''
}

这是真的很实用，之前真是大意了，各位看官有什么更好的建议呢~~~