form表单数据部分字符修改样式

需求：输入框内遇到问号"?"变红加粗

 难点：在input中直接用正则表达式给"?"加样式标签，是无法读取样式的，会直接显示标签，如图所示：

解决方案：

方法一：加一层span，覆盖在input上

原理：初始化时只显示span，单击后隐藏span，显示input，此时可编辑。失去焦点时隐藏input，显示span，带样式。

html如下：

<td>
  <input id="x" style="display: none" (blur)="read()" formControlName="businessPhoneNumber" matInput>
  <div id="z" style="display: block; width: 100%; height: 100%" (click)="edit()">
    <span id="y" style="display: block; width:100%; height: 100%">
    {{businessPhoneNumberValue}}
    </span>
  </div>
</td>

js/ts 如下：read()是切换到只读状态的span ，edit()是切换到可编辑的input。

  get businessPhoneNumberValue(): string {
    var y = document.getElementById("y");
    const inputText = this.formApplicant.get("businessPhoneNumber")?.value ?? "";
    y.innerHTML = inputText.replace(new RegExp("[?]", "g"), '<strong>' + '<font color="red">?</font>' + '</strong>');
    return y.innerHTML; //初始化时取到表单数据并加上样式
  }
  read() {
    var x = document.getElementById("x");
    var y = document.getElementById("y");
    var z = document.getElementById("z");
    x.style.display = "none";
    y.style.display = "block";
    z.style.display = "block";
    z.style.width = "100%";
    z.style.height = "100%"; //注意设置宽高和原input刚好一致
    const inputText = this.formApplicant.get("businessPhoneNumber")?.value ?? "";
    y.innerHTML = inputText.replace(new RegExp("[?]", "g"), '<strong>' + '<font color="red">?</font>' + '</strong>'); //取到input里的值，给所有"?"加上样式标签
  }
  edit() {
    var x = document.getElementById("x");
    var y = document.getElementById("y");
    var z = document.getElementById("z");
    x.style.display = "block";
    y.style.display = "none";
    z.style.display = "none";
    window.document.getElementById("x").focus();  //聚焦到输入框
  }

过程中遇到几个小问题:
1.初始化数据之后，点两下输入框才能编辑。解决方案：click时自动聚焦到输入框window.document.getElementById("x").focus(); 
2.input值为空的话就点不了，编辑不了。解决方案：html里把div和span设置初始宽度高度100%。
3.应用到多个字段比较麻烦。解决方案：封装，传参。
缺点：编辑时，不能同步样式。

方法二：引入富文本编辑器tinymce，绑定form

html如下：

<editor formControlName="businessPhoneNumber"
[init]="tinymceSetting"
style="height: 17px;width: 150px;"></editor>

js/ts文件如下： 

tinymceSetting = {
    plugins: [
      'paste textcolor colorpicker textpattern',
      'bbcode',  //解析html标签的插件
      'fullpage',
      'autoresize',  //调整尺寸样式的插件
    ],
    menubar: false,
    toolbar: false,  //把不需要的工具栏都去掉，只要输入框
    statusbar: false,
    autoresize_on_init: true,
    autoresize_overflow_padding: 0,
    autoresize_bottom_margin: 0,
    setup: editor => {
      editor.on('keyup change', () => {  //输入字符实时更新样式
        var content = editor.getContent().replace(new RegExp("[?]", "g"), "[color=red][b]?[/b][/color]");
        this.onEditorContentChange.emit(content);
      });
    }
  };

tinymce的插件配置文件：plugin.js，在html2bbcode和bbcode2html函数里分别加一句：

rep(/\?/gi, '<strong>'+'<font color="red">?</font>'+'</strong>');

但仍存在诸多问题：
1.plugin.js里加的作用是初始化的时候修改问号的样式，但是编辑数据的时候，不生效。如果在component.ts里也加上样式标签的替换，则会重复判断，标签越加越多。
2.数据格式变了，传给后台会带html标签，可以通过content.match(/\d+/g).join('');去标签化。
3.编辑器初始样式难调整，tinymce6.0删除了一些样式配置，如编辑器内文本的margin。
4.点别的标签页再切过来的时候，编辑器没了。
缺点：数据绑定困难，要安依赖包插件，增加页面加载时间。故不推荐该方法。

如有大佬知道解决办法，欢迎评论留言~