通过jscript编辑内容后,保持插入位置满足

Question

我有一个contenteditable div,每个textchange后都通过javascript编辑内容(textchange.js)比如添加html标签(只有span-tags用于更改某些单词的颜色)以及在这里和那里添加或删除一些空格,但我的问题是因为内容在用户编辑时被更改,所以插入符改变其位置在每次按键之后,几乎不可能写出单个单词.我正在寻找一种防止这种跳跃的方法,我已经考虑过添加一个特殊的字符串,在编辑它之前不会被用作插入符号位置的一种标记,将其删除当完成并将插入符号放回到这个位置时,但由于我正在使用正则表达式(目前每次文本更改后大约25次),这个特殊字符几乎会毁掉它们中的每一个,我将不得不添加类似的东西\x40? 每个地方,根本不会看起来漂亮和清晰:

/\s<span class="b0">hello\sworld</span>/g

至:

/\s\x40?<span class="b0">\x40?h\x40?e\x40?l\x40?l\x40?o\x40?\s\x40?w\x40?o\x40?r\x40?l\x40?d\x40?</span>/g

我不知道它是否有帮助,但这里有一个关于如何更改内容的示例(在每次按键之后):

foo +++   <span class="c3">bar</span> - baz -<span class="c0">qux</span>

至:

<span class="c1">foo</span> + <span class="c3">bar</span> - <span class="c1">baz</span> * <span class="c0">qux</span>

对于如何解决这个问题的每一个建议,提示或提示,或者更好的方法来做这个标记,我将不胜感激.

谢谢 :)

Answer 1

您可以创建一个抽象，将特殊字符添加到可读的正则表达式中。它很简单，并且可能需要对当前代码进行最少的更改。

\n\n

不过可能有更优雅的解决方案。如果您从不替换中间有插入符号的文本（如图所示），repl|aced您可以将原始字符串分成两部分，并对两部分应用过滤器。插入符位置保留在除号处，即第一个要点的长度处。

\n\n

但是，如果您确实需要在插入符号位置进行替换，则无论如何都可以从拆分开始。之后，再次逐一运行过滤器。如果过滤器匹配，则将插入符号移动到预定的相对位置 - 比如说用 替换++|+（表示插入符号的管道）\xc3\x97\xc3\x97。你甚至可以让它顺其自然，这会导致\xc3\x97\xc3\x97|. 或者为每个过滤器进行硬编码的相对插入符号移动，如果您进行代码替换，这非常有用，因为您可以将插入符号移动到正确的位置（假设您替换<|i></i>为<em>|<em>；注意插入符号方便地移动到用户可能想要的位置）。

\n