Question

我有contenteditable div。我正在努力寻找“＃34; design＆＃34;并将其包装在span元素中。

HTML ：

<div id="text"></div>

的JavaScript：

$("#text").prop("contenteditable", true);
var string = $("#text")[0].innerHTML;
$("#text").innerHTML = string.replace("design", "<span>design</span>");

这不起作用。我的第一个猜测就是它因为脚本运行一次，所以当我键入＆＃34; design＆＃34;它没有抓住它。所以，我尝试将它放在setInterval中，但这也不起作用。 JSFiddle

非常感谢任何帮助。

Answer 1

$("#text").prop("contenteditable", true).keypress(function(e){
    $(this).html(function(i,html){return html.replace(/<span>design</span>/g,"design").replace(/design/g, "<span>design</span>")});
});

我没有测试，但希望它能够正常工作。

Answer 2

你可以这样做

$('#text').prop("contenteditable", true).on('keyup change',function(){
    var $el = $(this);
    $el.find('span').contents().unwrap(); // remove existing spans around "design"
    $el.html(function(i,v){ 
       return v.replace(/\bdesign\b/gi, "<span>design</span>") // wrap design with spans
    });
    setEndOfContenteditable(this); // reset the cursor to the end
});

FIDDLE

从这个SO答案中获取setEndOfContenteditable函数 - 它将光标设置回文本的末尾 https://stackoverflow.com/a/3866442/1385672

尝试用span元素中包含的相同单词替换单词

2 个答案: