Question

那么，

我需要在div contentEdible属性中用相同的单词替换单词，但格式化为...
像这样：
<div> My balls are big </div>

对此（替换词：球）：
<div> My balls are big </div>

在contentEditable中，这种情况会发生，但用户键入文本时会发生替换。我认为onkeydown，onkeyup或onkey press这个简单的事件可以解决这个问题。但是，问题在于插入符号，毕竟我尝试过，它在替换之前停留，何时应该留下来。我尝试编写一些js代码，尝试找一些jquery脚本，但是在这种情况下它们都失败了......

任何人都有一些想法或技巧？

我认为： - ＆GT;记录未格式化单词的长度。 - ＆GT;删除这个词 - ＆GT;把新单词格式化。 - ＆GT;与插入符号一起使用，根据此格式化的单词长度进行定位。 - ＆GT;是吗？ PS：我必须在这个div的任何地方考虑一个词。

我不知道怎么写这个代码，就像上面说的那样。

纠正我，如果我错了。

从那以后，谢谢！

编辑[1]：我希望这适用于 Mozilla Firefox ，具体而言;

Answer 1

我在这台机器上只有IE6 / 7，但也许你可以将这个概念应用到Ranges的其他浏览器版本（或者这可能是跨浏览器？）。

基本上我们存储光标位置，进行搜索/替换，然后将光标放回原位：

HTML：

<div id="content" contentEditable="true" onkeyup="highlight(this)">This is some area to type.</div>

和脚本：

function highlight(elem) {
// store cursor position
var cursorPos=document.selection.createRange().duplicate();
var clickx = cursorPos.getBoundingClientRect().left; 
var clicky = cursorPos.getBoundingClientRect().top; 
// copy contents of div
var content = elem.innerHTML;
var replaceStart = '<font style="color:blue">';
var replaceEnd = '</font>';
// only replace/move cursor if any matches
// note the spacebands - this prevents duplicates
if(content.match(/ test /)) {
    elem.innerHTML = content.replace(/ test /g,' '+replaceStart+'test'+replaceEnd+' ');
    // reset cursor and focus
    cursorPos = document.body.createTextRange();
    cursorPos.moveToPoint(clickx, clicky);
    cursorPos.select(); 
    }   
}

Div可编辑等等......更多

1 个答案: