js 字符串根据下标索引实现高亮显示

效果图

在这里插入图片描述

实现代码
  • 方式1 - 转数组

<script>
    var str = `我们于前述时间更新了《爱奇艺隐私政策》的相关内容。本次更新的内容主要包括: 依照最新法律要求更加详细地介绍了我们对儿童个人信息的保护规则并据此增加了附件一《爱奇艺儿童个人信息保护规则》、增加了身份认证功能下我们对身份认证信息的收集和使用情况以及其他文案描述性内容调整等。 请您在使用/继续使用爱奇艺集团的产品与/或服务前仔细阅读和充分理解全文,并在同意全部内容后使用/继续使用。`
    var list = [
        ["NUM", 76, 77],
        ["ORG", 146, 151],
        ["NUM", 176, 178]
    ]
    var strList = str.split("")
    for (var i = 0; i < list.length; i++) {
    
    
        var [type, startNum, endNum] = list[i]
        if (type == "NUM") {
    
    
            if (startNum == endNum - 1) {
    
    
                strList[startNum] = `<span style="color:blue;">${
      
      str[startNum]}</span>`
            } else {
    
    
                strList[startNum] = `<span style="color:blue;">${
      
      str[startNum]}`
                strList[endNum - 1] = `${
      
      str[endNum-1]}</span>`
            }

        }
    }
    document.write(strList.join(""))
</script>
  • 方式2 - 字符串截取
<script>
	var str = `我们于前述时间更新了《爱奇艺隐私政策》的相关内容。本次更新的内容主要包括: 依照最新法律要求更加详细地介绍了我们对儿童个人信息的保护规则并据此增加了附件一《爱奇艺儿童个人信息保护规则》、增加了身份认证功能下我们对身份认证信息的收集和使用情况以及其他文案描述性内容调整等。 请您在使用/继续使用爱奇艺集团的产品与/或服务前仔细阅读和充分理解全文,并在同意全部内容后使用/继续使用。`
    var list = [
        ["NUM", 76, 77],
        ["ORG", 146, 151],
        ["NUM", 176, 178]
    ]
    for (var i = list.length - 1; i >= 0; i--) {
    
    
        var [type, startNum, endNum] = list[i]
        if (type == "NUM") {
    
    
            str = str.substring(0, startNum) + '<i style="color:blue">' + str.substring(startNum, endNum) + '</i>' + str.substring(endNum)
        }
    }
    document.write(str)
</script>

猜你喜欢

转载自blog.csdn.net/m0_37285193/article/details/106055872