javascript - 将字符串中的十六进制颜色代码替换为彩色 html 标记
问题描述
给定一个包含颜色代码的字符串,我想匹配代码并将它们替换为<span style='color: code'>
具有相同颜色代码的 a 以生成彩色 HTML 字符串。
这是我已经尝试过的:
function parseColors(str) {
let reg = /#[0-9a-f]{6}/gi
let arr = str.match(reg)
if (arr) {
arr.forEach(m => {
str = str.replace(m, `<span style='color: ${m}'>`)
str += "</span>"
})
}
return str
}
console.log(parseColors(
"#abcdefthe, #ff0000 red #abcdef fox"
))
// prints:
// <span style='color: <span style='color: #abcdef'>'>the, <span style='color: #ff0000'> red #abcdef fox</span></span></span>
问题是,它替换了相同的颜色两次,所以首先#abcdef 将是一个<span>
标签,但随后它用另一个替换标签中的颜色<span>
解决方案
不是最好的解决方案,但它可以适当地添加结束标签。
const HexPattern = /(#[0-9a-f]{6})(\s*[\w,]+\s*)/gi
function parseColors(str) {
return str.replace(HexPattern, (s, g0, g1) => `<span style="color:${g0}">${g1}</span>`)
}
let html = parseColors("#abcdefthe, #ff0000 red #abcdef fox")
console.log(html)
document.body.innerHTML = html
推荐阅读
- swift - 通过 CocoaPods 安装 RxReachability 时出现问题
- html - 点阵打印机中的打印问题
- python - ImportError:动态模块未定义初始化函数(initlibpyuno)
- ios - UISegmentController 标题文本正在奇怪地切割
- html - 为什么我不能在 .central1 div 中编辑 .above 类?
- java - n位的Java String HashCode?
- php - 如何删除 JSON 的某些部分
- django - Django + React 生产设置
- javascript - vue,使用javascript hook实现动画失败
- python - 使用 pylibdmtx 将 Datamatrix 解码为数字