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

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>

结果：

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

第2章第21节：使用项目符号修饰段落中的文字内容 [PowerPoint精美幻灯片实战教程]
项目符号和项目编号的作用相似,都是放在段落的开头,用来修饰段落中的文字内容.不同之处是,项目符号主要用于修饰没有顺序关系的内容. 点击项目符号图标,给所选文字添加项目符号. 此时在每个段落的开头,都显 ...
Java替换Word模板中的文字、图片、表格、水印
前言由于业务需求,要求开发一个工具类,需要对Word模板中的内容进行替换,并且支持插入图片.根据业务生成自定义表格,以及对处理后的文件增加水印,处理完的文件支持保存doc.docx.pdf格式 1. ...
EXCEL-VBA（WORD）：将EXCEL中的文字替换到Word中的文字
Dim WordApp As Object Set WordApp = CreateObject("Word.Application") WordApp.Visible = Tru ...
CSS之设置p段落中的文字与页面左侧缩进两个字符!...
p{ padding-left:2em; /*p段落中的字符与页面左侧缩进两个字符*/ } 转载于:https://www.cnblogs.com/friendan/archive/201 ...
java word标签替换_JAVA实现替换WORD模板中的文字和图片
1.本来有其他方法可以实现的,但是由于jar包一直有问题所以换了种,要是还有其他的更好的方法,希望可以讨论 2.废话不说直接上代码: 3.我自己加了个生成图片的方法,也可以不需要直接用已经存在的图片替 ...
Photoshop批量替换PSD文件中的文字并转成JPEG图片
在处理一些图片内容相同,文字内容不一样的时候.Photoshop有批量处理的方法,可以免去人工粘贴复制的麻烦. 1. 设计好需要替换文字的PSD 2. Photoshop程序:图像->变量-&g ...
php替换视频教程,替换掉视频运动中的文字 | 修改视频文字的内容(附带软件与详细教程)...
对于广告视频宣传,不知狸友们曾经是否有过这样的想法,利用借势营销的手段,将某段热门的视频影视片段修改成广告的内容,以达到热点广告的目的.在这个互联网比较发达的时代,广告形式各式各样,唯有创新或者比较突 ...
java读取word文档中的文字和图片，doc和docx兼容版
也是我东抄抄,西抄抄拿来测试改装的,话不多说,直接上代码 <dependency><groupId>commons-io</groupId><artifact ...
用Python批量替换多个Word文件中的文字
定义函数info_update.只需要向其中传入目标文件路径,待替换的词和新词即可 import docx def info_update(doc,old_info, new_info):'''此函数 ...

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

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

最新文章

热门文章