7

我有一个 contenteditable div，它的内容在每次 textchange( 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>

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

谢谢 ：）

4

2 回答 2

1

可能这不是最好的解决方案，但我创建了 2 个 div，一个用于显示文本，另一个用于编辑它，第二个在第一个之上并具有一定程度的透明度。

像这样：

<div style="position: absolute; left: 48px; top: 16px;" unselectable="on" onselectstart="return false">
    <code id="code_show">Type here.</code>
</div>
<div style="position: absolute; left: 48px; top: 16px;">
    <span style="opacity:0.33"><code id="code_area" contenteditable="true" onkeyup="colorize();">Type here.</code></span>
</div>

onselectstart="return false"和unselectable="on"确保第一个不可选择。onkeyup="colorize();"确保colorize每次用户按下一个键来编辑文本时都会调用javascript 函数。

因此，您必须定义它以更新内容code_show以匹配其中的内容code_area但具有颜色。

例如，此代码将每个单词 RED 涂成红色：

<script>
function colorize(){
    var code_area= document.getElementById('code_area');
    var code_show= document.getElementById('code_show');

    var inner= code_area.innerHTML;
    inner= inner.replace(/RED/g,"<span style=\"color: red\">RED</span>");
    code_show.innerHTML= inner;
}
</script>
于 2016-06-03T14:12:44.153 回答
0

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

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

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

于 2014-01-03T21:14:19.083 回答