1

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

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

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

谢谢

4

1 回答 1

2

您可以通过在 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>
于 2011-06-17T03:07:15.770 回答