如何使正则表达式模式文本框中的装饰器无法选择？

Question

here is a screenshot of regextester.com:

users can only select the spaces between the preset pattern decorators, how to achieve this? I inspected the stylesheets, still have no clue.

Answer 1

You need to utilize contentEditable , here's a simplified recreate of regextester input:

 document.querySelector('.editor').addEventListener('click', e => { e.currentTarget.querySelector('.input').focus(); });

 .editor .input { outline: none; } .editor *:not(.input) { opacity: 0.5; user-select: none; }

 <div class="editor"> <span>/</span> <span class="input" contentEditable="true"></span> <span>/g</span> </div>

---

Using pseudo elements is also a good idea since there are natually unselectable:

 document.querySelector('.editor').addEventListener('click', e => { e.currentTarget.querySelector('.input').focus(); });

 .editor .input { outline: none; } .editor .input::before, .editor .input::after { opacity: 0.5; } .editor .input::before { content: '/'; } .editor .input::after { content: '/g'; }

 <div class="editor"> <span class="input" contentEditable="true"> </span> </div>