1

好,

我需要替换一个单词,在 div contentEdible 属性上,用相同的单词但格式化......
像这样:
<div> My balls are big </div>

到这个(替换单词:balls):
<div> My <font style="color:blue;">balls</font> are big </div>

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

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

我认为: --> 记录未格式化单词的长度。--> 删除这个词 --> 把新词格式化。--> 使用插入符号,根据这个格式化的字长定位。--> 是吗?PS:我在这个div的任何地方都要考虑一个词。

我不知道如何编写执行我上面所说的代码。

如我错了请纠正我。

至今,谢谢!

编辑[1]:我希望这适用于Mozilla Firefox,特别是;

4

1 回答 1

0

我在这台机器上只有 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(); 
    }   
}
于 2010-07-30T03:51:22.010 回答