[css/js]全局替换。

最新推荐文章于 2023-10-06 13:36:46 发布

爱吃猪的小白菜、

最新推荐文章于 2023-10-06 13:36:46 发布

阅读量502

点赞数

分类专栏： js

本文链接：https://blog.youkuaiyun.com/qq_34365469/article/details/104877130

版权

js 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了如何使用JavaScript实现HTML页面中的全局搜索关键词并标红显示、替换内容以及重置功能。通过示例代码展示了从搜索输入到替换操作的具体实现，并提供了源码下载链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.要达到的效果:

1.搜索关键词,标红;

2.全局替换;

3.重置;

二.效果图

初始:

搜索:

替换:

重置:

三.源码下载链接

链接: https://pan.baidu.com/s/1rJ5a6MejVg3aFyAJtARgyA 提取码: 7tk9

四.源码

-----------------------------------------我是分割线-------------------------------------------------

<!DOCTYPE html>

<head>

<title>复制和替换</title>

<style>

.show {

width: 732px;

height: 360px;

background-color: #fefefe;

margin: 50px auto;

overflow: hidden;

}

.box {

width: 535px;

height: 265px;

margin: 40px 70px;

border: 1px solid #c8c8c8;

}

.box .buttonArea {

width: 100%;

height: 32px;

margin: 26px;

}

.box .buttonArea input,

button {

float: left;

}

/*搜索框*/

.box .buttonArea .search {

margin: 0px 13px 0px 22px;

width: 150px;

height: 32px;

font-size: 12px;

line-height: 32px;

box-sizing: border-box;

}

/*搜索、替换、重置按钮*/

.box .buttonArea .searchButton,

.replaceButton,

.resetButton {

width: 40px;

height: 32px;

font-size: 12px;

line-height: 32px;

box-sizing: border-box;

margin-right: 13px;

}

/*替换内容框*/

.box .buttonArea .replace {

margin-right: 13px;

width: 150px;

height: 32px;

font-size: 12px;

line-height: 32px;

box-sizing: border-box;

}

.box p {

width: 525px;

height: 145px;

padding-left: 5px;

text-indent: 2em;

overflow: hidden;

font-size: 14px;

text-align: justify;

}

.box p .color {

color: red;

}

</style>

</head>

<body>

</div>

<p>

成都，简称“蓉”，别称蓉城、锦城，是四川省省会、副省级市、特大城市、成都都市圈核心城市，

国务院批复确定的中国西部地区成都重要的中心城市，国家重要的高新技术产成都业基地、商贸物流中心和综合交通枢纽

成都地处中国西南地区、四川盆地西部、成都平原腹地，境内地势成都平坦、河网纵横、物产丰富、农业发达，

属亚热带季风性湿润成都气候，自古享有“天府之国”的美誉成都；

</p>

</div>

//replaceAll方法

function replaceAll(str, target, value) {

let i = 0

while (str.indexOf(target, i) > -1) {

let start = str.indexOf(target, i)

let end = start + target.length

str = str.slice(0, start) + value + str.slice(end)

i = start + value.length

}

return str

}

var oP = document.querySelector(".box p "),

oSearchInput = document.querySelector(".box .buttonArea .search"),//搜索框

oSearch = document.querySelector(".box .buttonArea .searchButton"),//搜索按钮

oReplaceInput = document.querySelector(" .box .buttonArea .replace"),//替换搜索框

oReplaceButton = document.querySelector(".box .buttonArea .replaceButton"), //替换按钮

oResetButton = document.querySelector(".box .buttonArea .resetButton"); //重置button

var strOrignal = oP.textContent

//点击搜索按钮时,搜索到的内容变红

oSearch.onclick = function () {

// console.log(oSearchInput.value.toString())

let target = oSearchInput.value.toString(),

value = '<span class="color">' + target + '</span>',

str = oP.textContent;

let newStr = replaceAll(str, target, value)

oP.innerHTML = newStr

// console.log(oP.innerHTML)

// console.log(oP.textContent)

}

//点击替换按钮时

oReplaceButton.onclick = function () {

let target = oSearchInput.value.toString(),

value = oReplaceInput.value.toString(),

str = oP.textContent;

let newStr = replaceAll(str, target, value)

oP.innerHTML = newStr

}

//点击重置按钮时

oResetButton.onclick = function(){

oP.textContent = strOrignal

oSearchInput.value = ""

oReplaceInput.value = ""

}

</script>

</body>

</html>

-----------------------------------------我是分割线-------------------------------------------------