Agent skill
posts-peterroe-peterroe-icu
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/other/posts-peterroe-peterroe-icu
SKILL.md
高亮的实现
我们知道，以Vue为例子，如果想要实现文字高亮效果，需要借助v-html进行模版渲染，例如：
在下面的代码中
<script setup>
const str = 'my name is peterroe'
const keyWord = 'peterroe'
const handleKeyWordHighlight = (s, k) => { //希望高亮的文字
const reg = new RegExp(k, 'g')
return s.replace(reg, `<span class="highlight">${k}</span>`)
}
</script>
<template>
<div>
<span v-html="handleKeyWordHighlight(str, keyWord)"></span>
<div>
</template>
<style>
.hight-light {
background-color: yellow;
}
</style>
效果：
其他实现方法
通常来说，不管是vue的v-html和react的dangerouslySetInnerHTML，还是原生的innerHTML的，操作是非常危险的。
假如现在不准用上面的这三个操作，你应该怎样实现高亮的效果呢？
上面的这个问题实际上不是凭空捏造，而是本人碰到的真实场景，接下来我将使用split解决这个问题：
<script setup>
const str = 'my name is peterroe'
const keyWord = 'peterroe'
const handleKeyWordHighlight = (s, k) => { //希望高亮的文字
const reg = new RegExp(`(${k})`, 'g')
return s.split(reg).map((item, index) => ({
text: item,
isKeyWord: item === k
}))
}
</script>
<template>
<div>
<span
v-for="item in handleKeyWordHighlight(str, keyWord)"
:key="item.text"
:class="{'highlight': item.isKeyWord}"
>
{{item.text}}
</span>
<div>
</template>
实现思路就是，将原始的文字分割成单词，然后每个单词都添加一个class，如果单词是高亮的，则添加highlight这个class，如果不是高亮的，则不添加这个class。
上面还用到了split一个不常用的技巧：
// 通常来说
'aabbcc'.split('bb') // ['aa', 'cc']
'aabbcc'.split(/bb/) // ['aa', 'cc']
// 用正则捕获
'aabbcc'.split(/(bb)/) // ['aa', 'bb', 'cc']
第三种方法
利用 Range Api
<template>
<div id="word">my name is peterroe</div>
</template>
<script setup lang="ts">
const keyWord = 'name'
const reg = new RegExp(keyWord)
onMounted(() => {
const textNode = document.querySelector('#word')?.childNodes[0]
if(!textNode) return
const content = textNode?.textContent || ''
const start = content.match(reg)?.index || 0
const end = start + keyWord.length
const range = document.createRange()
range.setStart(textNode, start)
range.setEnd(textNode, end)
const highElm = document.createElement('span')
highElm.setAttribute('class', 'high-light')
range.surroundContents(highElm)
})
</script>
<style>
.high-light {
background-color: yellow;
}
</style>
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?