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.

CodePudding user response：

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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

---

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>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>