<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

        <title>live_exam</title>

    </head>

    <body>

       <!-- <div>

           <div style="float: left;width: 200px;margin-top: 20px; height: 100px; background: red"></div>

           <div style="display: block;overflow: hidden; height: 400px; background: blue; margin-top: 50px"></div>

       </div> -->

       <div id="testId"></div>

    </body>

    <!-- <script src="./css/channel.js"></script> -->

</html>

<script type="text/javascript">

    window.onload = function(){

        var str = 'abcdefghijklmnhjkobnvcxz'

        var arr = [[2,4],[6,8],[9,11],[20,21]]

        var result = '';

        for (var i=0; i <= arr.length-1; i++) {

            console.log(arr.length-1,i)

            if (arr.length > 1) {

                if (i == 0) {

                   // console.log(1)

                    result += str.substring(0,arr[i][0]) + '<span style="color:red">' + str.substring(arr[i][0],arr[i][1] + 1) + '</span>'

                    //console.log(result)

                } else if (i >0 && i< arr.length-1) {

                    //console.log(2)

                    result += str.substring(arr[i-1][1] + 1,arr[i][0]) + '<span style="color:red">' + str.substring(arr[i][0],arr[i][1] +1) + '</span>'

                    //console.log(result)

                } else if (i == arr.length-1) {

                    //console.log(result)

                    //console.log(4)

                    result += str.substring(arr[i-1][1] + 1,arr[i][0]) + '<span style="color:red">' +str.substring(arr[i][0],arr[i][1] + 1) + '</span>' + str.substring(arr[i][1]+ 1)

                }

            } else {

                result += str.substring(0,arr[i][0]) + '<span style="color:red">' + str.substring(arr[i][0],arr[i][1] + 1) + '</span>' + str.substring(arr[i][1]+ 1)

            }

        }

        document.getElementById('testId').innerHTML = result

        //console.log(result)

    }

    var text = 'ad$$1a$$nihao$$67$$nihao$$'

        var reg = /\$\$.*?\$\$/ig;

        var arr = []

        //var reg10 = /http(s)?:/ig;

        //var  str2 = text.replace(reg,'')

        var str2 = text.replace(reg,function(exp){

            console.log('-----------')

            console.log(exp)

            arr.push(exp)

            //console.log(exp.replace(reg10,''))

            //return exp.replace(reg10,'');

        })

        console.log(arr)

</script>

　　

js实现根据文本下标位置添加特殊标识的更多相关文章

  1. js实现在光标的位置 添加内容

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  2. js之向div contenteditable光标位置添加字符

    js之向div contenteditable光标位置添加字符  原理: 在HTML里面,光标是一个对象,光标对象是只有当你选中某个元素的时候才会出现的. 当我们去点击一个输入框的时候,实际上它会产生 ...

  3. JS获取光标在input 或 texterea 中下标位置

    <textarea placeholder="请输入表达式" id="methodInput" ></textarea> 获取位置: v ...

  4. 2.22 JS处理富文本

    2.22 JS处理富文本 前言    <富文本>这篇解决了富文本上iframe问题,其实没什么特别之处,主要是iframe的切换,本篇讲解通过js的方法处理富文本上iframe的问题一.加 ...

  5. arcgis api 3.x for js 解决 textSymbol 文本换行显示（附源码下载）

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

  6. Mysql下在某一列后即表的某一位置添加新列的sql语句

    Mysql简介 MySQL是一个开放源码的小型关联式数据库管理系统,开发者为瑞典MySQL AB公司.MySQL被广泛地应用在Internet上的中小型网站中.由于其体积小.速度快.总体拥有成本低,尤 ...

  7. js 判断一个文本框是否获得焦点

    1.js 判断一个文本框是否获得焦点 // 可以用document.activeElement判断 // document.activeElement表示当前活动的元素   // 查找你要判断的文本框 ...

  8. 给定两个字符串 s 和 t，它们只包含小写字母。 字符串 t 由字符串 s 随机重排，然后在随机位置添加一个字母。 请找出在 t 中被添加的字母。

    给定两个字符串 s 和 t,它们只包含小写字母.字符串 t 由字符串 s 随机重排,然后在随机位置添加一个字母.请找出在 t 中被添加的字母. 示例: 输入: s = "abcd" ...

  9. MongoDB "$" 字符 下标位置

    我们可以修改列表里面元素的名字 例如: 修改age=34的数据,hobby里面的"足球"改为"网球" }) { "_id" : Object ...

随机推荐

  1. Java并发程序设计（二）Java并行程序基础

    Java并行程序基础 一.线程的生命周期 其中blocked和waiting的区别: 作者:赵老师链接:https://www.zhihu.com/question/27654579/answer/1 ...

  2. javaScript中with函数用法实例分析

    javaScript 中的 with 函数 ,即所谓的with 语句,可以方便地用来引用某个特定对象中已有的属性,但是不能用来给对象添加属性,要给对象创建新的属性,必须明确地引用该对象. with 函 ...

  3. python高级——垃圾回收机制

    GC作为现代编程语言的自动内存管理机制,专注于两件事:1. 找到内存中无用的垃圾资源 2. 清除这些垃圾并把内存让出来给其他对象使用.GC彻底把程序员从资源管理的重担中解放出来,让他们有更多的时间放在 ...

  4. phpmyadmin#1045 无法登录 MySQL 服务器

    使用lnmp安装wordpress在登录phpmyadmin数据库的时候诡异的出现了   phpmyadmin#1045 无法登录 MySQL 服务器,解决方法如下: 1 修改root的密码—不可以行 ...

  5. C语言基础一（敲打键盘、寻找资料）

    事前声明一点:小编的所有材料都是基础,没有什么大的不同,您若觉得不错的话,可以互相探讨下,毕竟本人也是小雏鸟. 大家在学习C语言.C++类似的高端语言时候,往往都是为了学而学,殊不知为什么而学,或许更 ...

  6. MySql中drop、truncate、delete的区别

    1.drop:能对table和view 用法:  drop table [is exists] 表1,表2,表3....: ①drop是DDL中删除表的操作,会删除表结构和所有数据,并释放空间. ②并 ...

  7. IDEA的安装

    https://blog.csdn.net/when_to_return/article/details/81590356

  8. redis:消息发布与订阅频道

    1. 发布与订阅频道 消息发布与订阅像收音机与广播台的关系 1.1. publish channel message 发布频道 语法:publish channel message 作用:发布频道消息 ...

  9. Linux命令第二篇

    作业二: 1)   在用户的主目录下创建目录test,进入test创建空文件file1 # ls /home/test file 2)   以长格式形式显示文件信息,注意文件的权限和所属用户和组 # ...

  10. Taints 与 Tolerations

    节点亲和性是描述Pods如何分配到一个或一组节点的策略,亲和性的相关资料可以参考Kubernetes中的亲和性与反亲和性.与亲和性规则不同, Taints 描述节点拒绝一个或一组Pods的策略.其实现 ...