如何创建 html 输入文本区域，以便可以为某些单词添加下划线或设置其格式？

我想要一个输入字段，我可以让javascript为输入字段的不同部分设置某些属性。 一个简单的例子来演示我想做的事情：假设我想在输入文本区域中的所有咒语单词下划线。因此，当插入新字母时，JavaScript 将检查输入文本区域，并且对于与我的已识别诅咒词数组匹配的任何单词，它都会在该单词下划线。请注意，我不希望用户/客户端能够设置文本的任何属性，我只是希望 javascript 能够以不同于其他单词的方式格式化某些单词（因此，没有工具栏或类似的东西）。我还希望该框在其他方面看起来与常规文本区域完全相同。

我已经知道一些富文本编辑器（如 juju 编辑器和 lwrte）以及一些语法荧光笔，但我不确定它们是否能实现我想要的功能。

那么，有人知道可以让我做到这一点的工具吗？

Thanks

您可以通过在 div 上将该属性设置为 true 来使 div 成为“可内容编辑”。然后用不影响布局的标记包围有问题的单词，但可以设置样式并在以后轻松删除。

像这样的东西：

<style type="text/css">
  .content {
    border: 5px inset #000;
    padding: 5px;
  }

  .content .curse {
    color: #f00;
    font-weight: bold;
    text-decoration: underline;
  }
</style>
<div contentEditable="true" class="content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean consequat gravida tempus. Vivamus convallis, purus dictum bibendum ullamcorper, neque ipsum aliquam ligula, sit amet imperdiet est ante non nisl. Mauris dignissim libero et urna iaculis at iaculis metus semper. Sed ac nisl eu arcu molestie pretium quis quis ligula. Cras vitae enim vitae lacus molestie dictum. Donec rutrum tincidunt augue, vel pretium lectus faucibus ut. In consequat diam accumsan urna fermentum vitae tincidunt ipsum rutrum. Curabitur sagittis, ante a viverra fringilla, orci urna feugiat urna, eu ultricies lacus odio adipiscing risus. Sed pellentesque blandit ipsum vel hendrerit. Nulla nibh mauris, egestas sed consectetur et, lobortis in dolor. Curabitur eu ante lectus. Cras consequat, dui sed pellentesque tempor, purus turpis egestas sapien, in fermentum eros tortor vel mi. Integer accumsan, augue id elementum pretium, est quam vehicula nisl, at congue purus sem quis ipsum. Aliquam commodo, erat in euismod lacinia, tortor lectus interdum lacus, quis vestibulum augue nulla in tellus.
</div>
<script type="text/javascript">
  $(document).ready(function() {
    var html = $('.content').html();
    $('.content').html(html.replace(/lectus/gi, '<span class="curse">lectus</span>'));
  });
</script>