我正在制作一个格式化的文本编辑器,而不是基于按钮。我有以下JS:
function titleFocus() {
$(".title").css("border", "1px solid #666666");
}
function titleBlur() {
$(".title").css("border", "none");
}
$(document).ready(function() {
$('.input').bind('input propertychange', function() {
var inputString = $(".input").html();
var newInputString= inputString.replace(/:strong:(.*?):strong:/g, ':strong:<strong class="written">$1</strong>:strong:');
var newInputString= newInputString.replace(/:b:(.*?):b:/g, ':b:<strong class="written">$1</strong>:b:');
var newInputString= newInputString.replace(/:italic:(.*?):italic:/g, ':italic:<strong class="written">$1</strong>:italic:');
var newInputString= newInputString.replace(/:i:(.*?):i:/g, ':i:<strong class="written">$1</strong>:i:');
if (newInputString !== inputString) {
console.log (newInputString);
$(".input").html(newInputString);
}
});
});
问题是,在我完成格式化队列(:strong:
或italic
)后,每次键入一个字符时,光标都会开始。最初编写格式化que后,它也会执行此操作。我怎么能阻止这个?此外,是否有更有效的方式来实现我正在做的事情?我担心每次有人输入一个角色时都会运行一大块JS会导致延迟。
编辑:显然,此代码会导致格式化的内容重复。
E.G::strong:<strong class="written"><strong class="written">TEXT</strong></strong>:strong: