JavaScript：替换原段落中的文字并将其变成红色

顽固油渍

已于 2022-07-19 12:22:40 修改

阅读量1.5k

点赞数

文章标签： servlet 前端 javascript

于 2022-07-19 12:21:09 首次发布

本文链接：https://blog.csdn.net/qq_48051316/article/details/125869401

版权

JavaScript练习：

输入新字符串和要替换的字符串，点击替换按钮

先在段落中查找，弹出窗口提示查找结果

如果有匹配项，将段落中的目标字符替换为输入的字符，并变为红色

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 变红 -->
    <style>
        /* 通过P标签找到span标签 */
        p > span{
            color: red;
        }
    </style>
</head>
<body>
<!--  设置输入框和按钮  -->
<input type="text" placeholder="要替换的字符串" id="old"> <br>
<input type="text" placeholder="新字符串" id="new">
<button id="btn">替换</button>

<p id="strText">
    456789456123458795421321
</p>

<script>
    // 获取表单元素
    // 获取到的都是带有标签的：<input type="text" placeholder="新字符串" id="new">
    var btn = document.getElementById("btn")
    var strOld = document.getElementById("old")
    var strNew = document.getElementById("new")
    var content = document.getElementById("strText")

    // 点击按钮执行的函数
    btn.onclick = function () {
        // 获取段落内容
        var str = content.innerText
        // 获取输入的值
        var oldStr = new RegExp(strOld.value,'ig')
        // 查找段落中是否存在输入的字符，并且输出提示信息
        oldStr.test(str)?alert("匹配成功"):alert("匹配失败，没有匹配项")
        // 新建字符串用来存放替换后的段落字符串
        var reg = str.replace(oldStr,"<span>"+strNew.value+"</span>")
        // 将段落内容换成新的字符串
        content.innerHTML = reg

        // innerHTML 指的是从对象的起始位置到终止位置的全部内容,包括Html标签。
        // innerText 指的是从起始位置到终止位置的内容,但它去除Html标签。
    }

</script>

</body>
</html>

结果：