根据具体位置将敏感字替换成红色，敏感字标红

---

---

☕敏感字标红逻辑：

因为在输入框input中的value没有办法改变其中某些字的颜色，要么只能通过style样式全部换成红色。

所以这里采用的是用一个div直接覆盖在input输入框上面，条件判断，是否存在敏感字。

如果存在敏感字，就将对应位置的敏感字标红，并将其赋到div里面，然后让div显示在input上面。input隐藏

如果不存在，就直接通过审核。

☕敏感字标红实例：

⚡输入文本：提交审核检测

⚡提交审核检测，敏感字标红

☕前端的页面样式：

<div class="mt15" style="margin-left: 29px;">
   <label class="fl SMScontent">短信内容&nbsp;&nbsp;</label>
   <span class="ml20">
	  <a-textarea
	    class="mr15 text-area"
	    :subfield="false"
	    :autofocus="false"
	    v-model="SMScontent"
	    ref="md"
	    @input="riseInput"
	    v-show="errorcontent"
	  ></a-textarea>
  </span>
<div>
<div v-show="!errorcontent"
     @click="errtexteare()"
     style="border: 1px solid #ccc;
     		border-radius: 4px;
            width: 360px;height: 100px;
            margin-left: 20px;
            margin-top: -20px;">
   <p v-html="errorconten1" style="margin-top: 8px;margin-left: 10px;font-size: 14px;"></p>
</div>

<div class="mt20" style="text-align: left">
              <a-form label="短信签名" style="margin-left: -10px;">
                <label>短信签名&nbsp;&nbsp; </label>
                <a-input
                    v-show="erroradd"
                    v-model="messagesign"
                    style="width: 360px;height: 40px; margin-left: -9px; "
                    placeholder="只能中文，不超过6个汉字"
                ></a-input>
                <div v-show="!erroradd"
                     @click="errinput()"
                     style="position:absolute;
                            border: 1px solid #ccc;
                            border-radius: 4px;
                            width: 360px;height: 40px;
                            margin-left: 59px;
                            margin-top: -30px;">
                  <p v-html="errorconten"  style="margin-top: 8px;margin-left: 10px;font-size: 14px;"></p>
                </div>
                <p v-show="!erroradd" style="padding-top: 15px;"></p>
              </a-form>
            </div>

☕得到敏感字位置：

☕敏感字标红替换：

var newHtml = this.messagesign
var newContent = this.SMScontent
console.log(res.data)
if(res.data.sign!=null){
   this.erroradd = false
    //循环遍历获取sign里面的敏感字位置
   res.data.sign.forEach(item=>{
       //slice从某个已有的数组返回选定的元素
       let seaSign = this.messagesign.slice(item.start,item.end+1);
       let regSign = new RegExp(seaSign,'g');//这里的g表示全局替换
       newHtml = newHtml.replace(regSign,"<span style='color: red;' >"+seaSign+"</span>");
   })
    //这里的this.errorconten就是已经替换完成的文本
        this.errorconten = newHtml
}
console.log(newHtml)
if(res.data.template!=null){
   this.errorcontent = false
   res.data.template.forEach(item1=>{
       let sea = this.SMScontent.slice(item1.start,item1.end+1)
       let reg = new RegExp(sea,'g')
       newContent = newContent.replace(reg,"<span style='color: red;' >"+sea+"</span>")
   })
    //这里的this.errorconten1就是已经替换完成的文本
   this.errorconten1 = newContent
}
console.log(newContent)