JavaScript实现文本目标字符替换和一键全部替换

需求描述:

实现在文本中替换目标字符，以及一键全部替换功能。

技术点:

利用string的replace实现替换第一个找到的目标字符。

replace(searchValue: string | RegExp, replaceValue: string): string;

利用string的replaceAll实现一键替换全部找到的目标字符。

replace(searchValue: string | RegExp, replacer: (substring: string, ...args: any[]) => string): string;

完整demo示例：

效果图:

完整代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>js实现文本字符替换全部替换</title>
</head>
<body>

<textarea name="textarea" id="text" rows="10" cols="50">标准测试技术，红糖标准，酸奶标准，浏览器运行标准。</textarea>
<div>
  查找<input
    id="oldVal"
    placeholder="要查找的内容"
    value="">
  替换<input id="newVal" placeholder="用来替换的内容">
  <button onclick="replace()">替换</button>
  <button onclick="replace('all')">全部替换</button>
</div>

<script type="text/javascript">

function replace (type) {
  let newText = ''
  const text = document.getElementById('text').value || ''
  const oldVal = document.getElementById('oldVal').value || ''
  const newVal = document.getElementById('newVal').value || ''
  if (type === 'all') {
    // 全部替换
    newText = text.replaceAll(oldVal, newVal)
  } else {
    // 替换找到的第一个
    newText = text.replace(oldVal, newVal)
  }
  // 将替换后的内容，更新到文档上
  document.getElementById('text').value = newText
}
</script>
</body>
</html>

到此这篇关于JavaScript实现文本目标字符替换和一键全部替换的文章就介绍到这了,更多相关js文本替换内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • js replace() 文本替换你所不知的

    js replace() 文本替换你所不知的

    复制代码 代码如下: //把word-word转化为wordWord function camelize(s){ return s.replace(/-(\w)/g, function(strMatch, p1){ return p1.toUpperCas(); }); } 这里应用到了文本替换函数replace,他的一般语法估计大家都已经耳熟能详了,现在介绍一下当他的第二个参数为函数时的情形. 今天我在群里发这个函数的时候,有个人反映很快,说上面的那个正则写错了"/-(\w)/g",

  • JS替换文本域内的回车示例

    复制代码 代码如下: <html> <head> <title>无标题文档</title> <script type="text/javascript"> function aa() { s=form1.t1.value; s=s.replace(//n|/r/g,"");// 加上g是全局替换,不加只替换第一个 是回车.是换行符 form1.t1.value=s; } </script> &l

  • JavaScript实现文本目标字符替换和一键全部替换

    JavaScript实现文本目标字符替换和一键全部替换

    需求描述: 实现在文本中替换目标字符,以及一键全部替换功能. 技术点: 利用string的replace实现替换第一个找到的目标字符. replace(searchValue: string | RegExp, replaceValue: string): string; 利用string的replaceAll实现一键替换全部找到的目标字符. replace(searchValue: string | RegExp, replacer: (substring: string, ...args:

  • 如何用javascript计算文本框还能输入多少个字符

    下面代码超简单,不多说了,直接上代码. //输入计数 //count:能輸入的數據總量 function Calculation(v, count) { var span = $(v).next(); var valLength = $(v).val().length; if (valLength > count) { $(v).val($(v).val().substr(0, count)); valLength = count; } span.text("您已輸入" + va

  • Java实现的文本字符串操作工具类实例【数据替换，加密解密操作】

    本文实例讲述了Java实现的文本字符串操作工具类.分享给大家供大家参考,具体如下: package com.gcloud.common; import org.apache.commons.lang.StringUtils; import java.security.MessageDigest; import java.security.NoSuchAlgorithmException; import java.text.BreakIterator; import java.util.Array

  • javascript 实现文本使用省略号替代（超出固定高度的情况）

    javascript 实现文本使用省略号替代（超出固定高度的情况）

    javascript 实现文本使用省略号替代 实现效果图: 如果图片不清晰,建议放大浏览器的尺寸进行查看 1.这里是配合jQuery来进行替换的,所以jquery还是必备的,毕竟是轻量级,而且对各大的浏览器兼容性也好.所以开始页面引入jquery文件. 2.在页面添加样式. <style type="text/css"> .text { background: #EEE;/*方便演示设置颜色*/ /*width: 410px;*/ height: 40px; /*高度是必须

  • javascript限制文本框输入值类型的方法

    本文实例讲述了javascript限制文本框输入值类型的方法.分享给大家供大家参考.具体分析如下: 要求:所有的文本框,只能输入数字和小数点,其他的符号一概不能输入: 重点是我希望在用户输入时就做限制,而不是提交时判断--也就是说如果用户在文本框内输入数字或小数点,可以正常输入:如果输入字母等非数字字符,则文本框会没有任何反应,不会显示输入的字符. <html> <body> <script> var s = "<input type=\"te

  • JS限制Textarea文本域字符个数的具体实现

    复制代码 代码如下: <head>       <title>JS限制Textarea文本域字符个数</title>       <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />       <SCRIPT LANGUAGE="JavaScript">       <!--//      

  • JavaScript实现文本相似度对比

    目录 一.发现问题 二.解决问题 1.编辑距离的概念 2.测试文本 3.代码实现 4.相似度对比结果 一.发现问题 在开发过程中,难免会使用到2个(多个)文本内容处理,一是便于宏观知道文本的重合度,而是更好的区分文本的创新度,也能更好的避免出现大篇幅复制. 为此,可以通过2个文本的相似度对比来实现业务需求. 二.解决问题 如果使用后端语言1来处理,就需要调取接口,对比少量的短文本可以实现,但是一旦遇到在界面实现多个文本对比,并且篇幅巨多,再通过接口可能就出现耗时特别长的情况.既然如此,但不如直接

  • JavaScript获取文本框内选中文本的方法

    本文实例讲述了JavaScript获取文本框内选中文本的方法.分享给大家供大家参考.具体分析如下: 这里的代码可以用来获取用户通过鼠标在文本输入框或者textarea里选择的选本. 需要注意ie的问题. 代码如下: 复制代码 代码如下: <script type="text/javascript"> function getFieldSelection(select_field) {     word='';     if (document.selection) {   

  • JavaScript字符串对象replace方法实例（用于字符串替换或正则替换）

    JavaScript replace 方法 replace 方法用于在字符串中用一些字符串替换另一些字符串,或者替换符合正则匹配的字符串,并返回替换后的字符串.其语法如下: 复制代码 代码如下: str_object.replace(reg_exp/str, replacement) 参数说明: 参数 说明 str_object 要操作的字符串(对象) reg_exp/str 必需.要匹配的正则表达式/要替换的字符串 如果 reg_exp 具有全局标志 g,那么 replace() 方法将替换所

  • JavaScript实现文本框中默认显示背景图片在获得焦点后消失的方法

    本文实例讲述了JavaScript实现文本框中默认显示背景图片在获得焦点后消失的方法.分享给大家供大家参考.具体如下: html代码: <form name="searchform" id="search-form"> <div> <b>Search</b> <input type="text" name="txtInput" title="Enter the t

随机推荐