vue 实现Ctrl+F搜索功能（解决掉能搜查标签属性）兼容IE
1、先看效果
2、搜索栏代码
<el-input
v-model="searchText"
placeholder="请输入关键字"
prefix-icon="el-icon-search"
clearable
size="small"
@keyup.enter.native="search"
>
</el-input>
<el-button
type="primary"
size="small"
icon="el-icon-search"
@click="search"
></el-button>
<div class="searchRight">
<span class="item" style="margin-right: 5px">
{{ num === 0 ? '没有任何结果' : indexNum + 1 + '/' + num }}</span>
<el-tooltip
class="item"
effect="dark"
content="上一个"
placement="top"
>
<el-button
icon="el-icon-arrow-up"
circle
type="text"
size="mini"
@click="prev"
></el-button>
</el-tooltip>
<el-tooltip
class="item"
effect="dark"
content="下一个"
placement="top"
>
<el-button
icon="el-icon-arrow-down"
circle
type="text"
size="mini"
@click="next"
></el-button>
</el-tooltip>
</div>
3、data() {return { } } 里的代码
// 搜索,
searchText: '',
scroll: '',
index: 1,
query: '',
preQuery: '',
indexNum: 0,
num: 0,
main: null,
showArr: [],
showIndex: 0,
4、滚动
mounted() {
// scroll代表滚动条距离页面顶部距离
window.addEventListener('scroll', this.dataScroll)
this.mian = document.querySelector('.log_content')
},
5、实现搜索、上一个、下一个、颜色替换功能
// 搜索
search() {
this.num = 0
this.indexNum = 0
this.query = this.searchText
// eslint-disable-next-line prefer-const
// document.querySelector 这里获取标签需要自己换一下
let main = this.main || document.querySelector('.log_content > .docx-wrapper > .docx')
var innerHTML = main.innerHTML
// 如果要兼容IE就使用下面的正则 （谷歌 IE 都可以使用）
//innerHTML = innerHTML.replace(new RegExp('<[^>]+>', 'g'), function(str) {
//return str.replace(new RegExp('(<\/?em.*?>)|(<\/?strong.*?>)', 'g'), '')
//})
//------ 这行代码不兼容IE
const emReg1 = new RegExp('<em style="background-color: yellow">', 'g')
innerHTML = innerHTML.replace(emReg1, '')
const emReg2 = new RegExp('</em>', 'g')
innerHTML = innerHTML.replace(emReg2, '')
const emReg3 = new RegExp('<strong style="background-color: #ff9632">', 'g')
innerHTML = innerHTML.replace(emReg3, '')
const emReg4 = new RegExp('</strong>', 'g')
innerHTML = innerHTML.replace(emReg4, '')
// ------
main.innerHTML = innerHTML
// 设置本次搜索背景色
if (this.searchText !== '' && this.searchText !== ' ') {
const reg = new RegExp(this.searchText, 'g')
const searchText = this.searchText
var mainInnerHTML = innerHTML.replace(new RegExp('(?=\>).+?(?=\<)', 'g'), function(str) {
const reg1 = new RegExp('(?=>).+', 'g')
return str.replace(new RegExp('(>).+', 'g'), function(str2) {
return str2.replace(reg1, function(str1) {
return str1.replace(reg, '<em style="background-color: yellow">' + searchText + '</em>')
})
})
})
main.innerHTML = mainInnerHTML
}
// 替换配置
this.getSearchList()
},
getSearchList() {
// em标签都是被替换的 所以em标签的数量就是搜索到关键字的数量
const num = document.getElementsByTagName('em').length
this.num = num
if (num !== 0) {
document.getElementsByTagName('em')[0].innerHTML =
'<strong style="background-color: #ff9632">' +
this.searchText +
'</strong>'
// 滚动到第一个关键字位置
document.getElementsByTagName('em')[0].scrollIntoView({
block: 'start',
behavior: 'smooth'
})
}
},
dataScroll() {
this.scroll =
document.documentElement.scrollTop || document.body.scrollTop
},
// 下一个
next() {
if (this.num !== 0) {
for (let i = 0; i < document.getElementsByTagName('em').length; i++) {
document.getElementsByTagName('em')[i].innerHTML = this.searchText
}
if (this.indexNum === this.num - 1) {
this.indexNum = 0
} else {
this.indexNum = this.indexNum + 1
}
document.getElementsByTagName('em')[this.indexNum].innerHTML =
'<strong style="background-color: #ff9632">' +
this.searchText +
'</strong>'
document.getElementsByTagName('em')[this.indexNum].scrollIntoView()
}
},
// 上一个
prev() {
if (this.num !== 0) {
for (let i = 0; i < document.getElementsByTagName('em').length; i++) {
document.getElementsByTagName('em')[i].innerHTML = this.searchText
}
if (this.indexNum === 0) {
this.indexNum = this.num - 1
} else {
this.indexNum = this.indexNum - 1
}
document.getElementsByTagName('em')[this.indexNum].innerHTML =
'<strong style="background-color: #ff9632">' +
this.searchText +
'</strong>'
document.getElementsByTagName('em')[this.indexNum].scrollIntoView()
}
}
