javascript - 如何创建一个 html 输入文本区域，以便我可以在某些单词下划线或设置格式？

Question

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

我已经知道一些富文本编辑器(如 juju 编辑器和 lwrte)以及一些语法高亮器，但我不确定它们是否符合我的要求。

那么，有人知道可以让我执行此操作的工具吗？

谢谢

Answer 1

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

像这样:

<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>