字符串查找和替换

最新推荐文章于 2022-10-30 16:04:04 发布
最新推荐文章于 2022-10-30 16:04:04 发布
阅读量2.1k 收藏 2
点赞数 3
分类专栏： js 文章标签： 字符串查找和替换
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liang_q/article/details/72921720
版权

主要使用方法：
1. text.indexOf(“a”) ,在字符串text文本中查找字符串a，若有，返回a首次出现的位置，若没有返回-1。
2. text.split(“a”),以字符串a分割字符串text，并转换为数组形式，若a为空，则分割为单个字符
3. arr.join(“a”),将数组转换为字符串，每项间以a相隔截取字符串text中下标strat到end之间的字符串
主要思路：
1. 通过Id获取要操作的文本内容text
var Otext = document.getElementById(“text”);
var Ovalue = Otext.innerHTML;
2. 设置按钮，实现文本收缩展开功能。
Otext.innerHTML = Ovalue.substring(0,50);
收缩时，截取段落前50个字符
off1=true;
off1=!off1;
为实现一次点击收缩，下次点击展开，需设置开关，设初值为true，点击一次，off1取反。
3. 查找字符串，添加黄色背景。
获取用户输入的字符串str
var arr1 = Ovalue.split(str1 );
用字符串str分割字符串，转换为数组
将数组转换为字符串，每项间以加有黄色背景的str相隔
Ovalue = Otext.innerHTML;
替换后，更新P段落中的大段文本内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>  
    <style>
        /*  边框样式  */
        #div{
                width:500px;
                padding:10px;
                border:5px solid yellowgreen;
                margin:0 auto;  }
        /*  段落文字样式 */
        div p{
                line-height:25px;
                font-family: "微软雅黑";
                color:#333;  }
        /*  查找、替换按钮样式  */
        #div>div{
                width:70px;
                height:40px;
                border:4px solid yellowgreen;
                line-height:40px;
                text-align: center;
                float:left;
                margin-left:10px;
                margin-bottom:10px;  }
        .active{ background-color: #ffcd06; font-size: 18px; }   /*  被选按钮样式  */
        #div >p{ clear:both; padding-left:10px;}
        #btn{ display:block; margin:0 auto;}
        button{  width:60px; height:30px;}  /*  输入框后按钮样式  */
        button a{
                text-decoration:none;
                text-align: center;
                line-height:20px;
                padding:3px;  }
        input{ height:25px; text-indent: 1em;}   /*  输入框样式  */
    </style>
</head>
<body>
<div id="div">
    <p id="text">教养和文化是两回事，有的人很有文化，但是很没教养，有的人没有什么
        太高的学历和学识，但仍然很有教养，很有分寸。教养是带有某种天生的素质和一点一滴的
        积累。人生那么长，未知的东西那么多。人与人之间的关系往往是相互的，与人为善，也是
        与自己为善。让自己更平和一点，更豁达一点，对于身边的过错，让自己更宽容一点。人人
        都有他的难处，何必强求于人。人生在世，行路匆匆，生活充满变数，时而乐极生悲，时而
        苦尽甘来，一切不必较真，只须笃定前行。要敢于认错，既然错了，就要纠正，虚假是味毒
        药，真实能帮你把失去的赢回来；要敢于担当，回避不是办法。人出生时，是一块质朴的石
        块，有棱有角，生气勃勃。但是，在生活无情的打磨中，人生慢慢被磨去棱角，变得圆滑而
        世故。要做坚守在悬崖峭壁上石块，勇敢忍受风霜的雕刻，永远保留自己的棱角。不要做河
        流里的石头，享受微波多情的抚摸，最后变成一块光亮的鹅卵石。</p>
    <div>查找</div>
    <div>替换</div>
    <p>
        <input id="Oinput1" type="text"/>
        <button id="btn1"><a href="#">查找</a></button>
    </p>
    <p>
        <input  id="Oinput2" type="text"/>
        <input id="Oinput3" type="text"/>
        <button id="btn2"><a href="#">替换</a></button>
    </p>
    <button id="btn"><a href="#">收缩</a></button>
</div>

<script>
    var Otext = document.getElementById("text");
    var Obtn = document.getElementById("btn");
    var Ovalue = Otext.innerHTML;
    var off1 = true;

    var Odiv = document.getElementById("div").getElementsByTagName("div"); //获取两个选择按钮
    var Op = document.getElementById("div").getElementsByTagName("p");  //获取两个选择按钮对应输入框
    //  初始值，默认选择查找
    Odiv[0].className = "active";
    Op[2].style.display = "none";
    //    选择查找
    Odiv[0].onclick = function () {
        for(i=0;i<2;i++){
            Odiv[i].className = "aaa";  // 取消两个选择按钮的样式
            Op[i+1].style.display = "none";  //关闭两个选择按钮对应输入框
        }
        Odiv[0].className = "active"; //给查找按钮添加active样式
        Op[1].style.display = "block"; // 打开查找按钮相应输入框
    }
    //    选择替换
    Odiv[1].onclick = function () {
        for(i=0;i<2;i++){
            Odiv[i].className = "aaa";
            Op[i+1].style.display = "none";
        }
        this.className = "active";
        Op[2].style.display = "block";
    }
    var Bfind = document.getElementById("btn1");    //    查找按钮
    var Breplace = document.getElementById("btn2");   //    替换按钮
    var Oinput1 = document.getElementById("Oinput1");
    var Oinput2 = document.getElementById("Oinput2");
    var Oinput3 = document.getElementById("Oinput3");
//    查找按钮
    Bfind.onclick = function () {
        if(Oinput1.value=="")
            alert("please input");   // 如果点击查找按钮时，输入框为空，弹出警示框
        else{
            str = Oinput1.value;  // 输入内容赋给str
            if(Ovalue.indexOf(str)==-1)
                alert("未找到查找内容！");  // 若未找到查找内容，弹出警示框
            else{
                var arr1 = Ovalue.split(str);  //以str分割字符串，转化为数组
                var Ospan = arr1.join("<span style='background-color: yellow'>"+str+"</span>");
                //   数组每项间用带有黄色背景的str连接，转化为字符串，赋给ospan
                Otext.innerHTML=Ospan;
            }
        }
        Ovalue = Otext.innerHTML;  //更新P段落中的大段文本内容
    }
//    替换按钮
    Breplace.onclick=function () {
        if(Oinput2.value=="")
            alert("please input");
        else{
            str1 = Oinput2.value;
            str2 = Oinput3.value;
            if(Ovalue.indexOf(str1)==-1)
                alert("未找到需替换的内容！");
            else{
                var arr1 = Ovalue.split(str1);
                var Ospan = arr1.join("<span style='background-color: yellow'>"+str2+"</span>");
                Otext.innerHTML=Ospan;
            }
        }
        Ovalue = Otext.innerHTML;   //替换后，更新P段落中的大段文本内容
    }
//收缩、展开按钮
    Obtn.onclick = function () {
        if(off1){  // 判断off1是否为真
            Otext.innerHTML = Ovalue.substring(0,50); //  截取段落前50个字符
            Obtn.innerHTML="展开";  //  按钮内文字由‘收缩’变为‘展开’
            for(i=0;i<2;i++){       //  收缩时，关闭两个选择按钮及相应输入框
                Odiv[i].style.display = "none";
                Op[i+1].style.display = "none";
            }
        }
        else{

            Otext.innerHTML= Ovalue;
            Obtn.innerHTML="收缩";
            for(i=0;i<2;i++){
                Odiv[i].style.display = "block";
                Op[i+1].style.display = "block";
            }
            Odiv[0].onclick();  //  文本展开式，默认显示选择查找按钮
        }
        off1=!off1;  //  因最终应实现点一次收缩，再点一次展开，故每次点击后off1取反
    }
</script>
</body>
</html>

这里写图片描述

这里写图片描述

liang_qq
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
字符串的查找与替换
Data_Python_VBA
11-18 750
微信公众号原文 难度系数：初级 系统：Windows 7 软件：Excel 2010 学习路径图： 针对之前的学习路径图，会针对的写一些文章 今天讲讲字符串的查找与替换：InStr，Find，Substitute Part 1：函数功能介绍 InStr，判断字符串1是否包含字符串2 Find，寻找字符串1在字符串2中出现的位置（从1开始） Substitute，将字符串中的信息替换为新...
字符串查找替换
12-03
在IT领域，字符串查找与替换是编程中非常基础且重要的操作。无论是在文本处理、数据分析还是日志分析等场景中，我们都需要频繁地对字符串进行查找和替换。下面，我们将详细探讨这一主题。 字符串查找通常涉及到查找...
查找替换字符串
sinat_40049561的博客
07-02 482
SELECT substr(Sd.SHOPNO,1,instr(Sd.SHOPNO,'-',1,3)-1) FROM SALE_DATEMAIN sd WHERE SD.SALEDATE > '2019-06-01' 这个instr(Sd.SHOPNO,'-',1,3)查找Sd.SHOPNO中出现‘-’第三次的当前位置。 ...
leetcode--833. 字符串中的查找与替换[1]
lattice的博客
11-17 584
https://leetcode-cn.com/problems/find-and-replace-in-string/description/ 对于某些字符串 S，我们将执行一些替换操作，用新的字母组替换原有的字母组（不一定大小相同）。 每个替换操作具有 3 个参数：起始索引 i，源字 x 和目标字 y。规则是如果 x 从原始字符串 S 中的位置 i 开始，那么我们将用 y替换出现的 x。如...
字符串学学习3→查找和替换
wanggaoxingH的博客
07-29 458
判断一个字符串是否在一个字符串中有下面几种用法： 不重要的：find(),index() 反而比较常用的是in() find和index查找一个字符串是否在一个字符串里，有的话返回所在位置，没有的话find返回-1，index会报错，这2个用得比较少 s = '我叫赛罗' print(s.find('赛罗')) # 找得到该字符串就返回该字符串所在位置，这里返回：2 print(s.find('贝利亚')) # 找不到就返回：-1 s = '我叫赛罗' print(s.index('赛罗')
C++字符串高效查找替换
12-22
在C++编程中，处理字符串查找与替换是一个常见的任务，特别是在大数据量的文本处理中，效率至关重要。在上述描述的场景中，作者遇到了一个需要高效查找并替换几万字符的问题。起初，尝试使用MFC库中的`CString`类的`...
C#中怎样从指定字符串中查找并替换字符串?
09-05
在C#编程中，查找和替换字符串是常见的操作，尤其在处理文本数据时。下面将详细介绍如何在C#中实现这一功能。 首先，C#提供了`System.String`类，它包含许多方法来处理字符串，包括查找和替换。例如，我们可以使用`...
字符串查找替换，多文件字符串查找替换
10-10
除了基本的查找和替换功能，高级的字符串查找替换工具可能还具备其他特性，例如忽略大小写、全词匹配、查找范围选择（如只在行首、行尾或整个行内查找）等。这些选项使得查找替换更加灵活，能适应更多实际场景。 在...
字符串查找、替换
05-23
在IT领域，字符串查找与替换是编程中非常基础且...综上所述，字符串查找和替换是编程中的基本操作，它们涉及到的算法和技巧丰富多样，对提高程序效率有着重要影响。在具体实践中，应根据问题的特性选择合适的解决方案。
nyoj113字符串替换
dianpuding9411的博客
07-27 285
字符串替换 时间限制：3000ms | 内存限制：65535KB 难度：2 描述编写一个程序实现将字符串中的所有"you"替换成"we" 输入输入包含多行数据每行数据是一个字符串，长度不超过1000数据以EOF结束输出对于输入的每一行，输出替换后的字符串样例输入 you are what you do 样例输出 we are what we ...
字符串替换
aizhi0169的博客
11-22 78
将文章中一些单词替换成另一些单词；1、先用单模式匹配算法找到该字符串(strstr、find、KMP)2、进行截取和替换（strcat,strcpy）下面给出相应实现代码： #include<iostream> #include<string> #include<string.h> #include<stdio.h> usin...
字符串查找与替换
qq_24624539的博客
10-19 1390
查找和替换一段字符串input，找出字符串中包含在方括号[]之间的内容，如果完全匹配特定的内容searchFor，则将其（包括起止方括号字符）替换为另一特定的内容replaceWith 输入： "About [Xunlei]: [[Xunlei] software] is the main product of [Xunlei Networking Technology Co., Ltd].","Xunlei","Thunder" 输出： "About Thunder: [Thunder softw
字符串-字符串的查找和替换
Leon_Jinhai_Sun的博客
10-06 344
hello_str = "hello world" # 1. 判断是否以指定字符串开始 print(hello_str.startswith("Hello")) # 2. 判断是否以指定字符串结束 print(hello_str.endswith("world")) # 3. 查找指定字符串 # index同样可以查找指定的字符串在大字符串中的索引 print(hello_str.find...
Java字符串：replaceFirst() 方法
Mr_chen的博客
11-11 1672
Java replaceFirst() 方法 replaceFirst() 方法使用给定的参数 replacement 替换字符串第一个匹配给定的正则表达式的子字符串。 语法 public String replaceFirst(String regex,String replacement) 参数 regex — 匹配此字符串的正则表达式。 replacement — 用来替换第一个匹配项的...
字符串查找，替换，分割，拼接
buchiqc的博客
10-30 160
result = string.find('a',2,7) #字符串查找，返回第一次出现位置索引,2为开始索引，7为结束索引，默认从0开始，字符串长度结束。new_string1 = string1.replace('a','A',2) #2为替换次数，默认全部，替换的为字符串子串。string7 = string7.replace('四','*')string7 = string7.replace('打','*')string7 = string7.replace('猪','*')
Python字符串查找与替换
最新发布
03-21
Python中可以使用字符串的replace()方法进行查找和替换操作，例如： ```python str = "Hello World" new_str = str.replace("World", "Python") print(new_str) # 输出：Hello Python ``` 另外，还可以使用正则...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值