Нужны советы по коду
Недавно написал свой скрипт для замены слов в тексте, результат работы здесь: www.wecode.ru/mine/wordedit
Делает он следующее: в диве у нас лежит какой либо текст (может быть с различными тегами), при наведении на слова/фрагменты - они выделяюся и при дальнейшем клике появляется инпут, в котором можем поменять слово на необходимое. При этом все ссылки должны выводиться ссылками без возможности их изменения, а остальные теги должны игнорироваться. Хотелось бы услышать советы по коду, чтобы начать поменьше быдлокодить, как обычно получается)) Если что-то в коде не понятно, пишите, распишу назначения всех фрагментов/переменных <div id="result"><a href="#">Начало</a>. Две ссылки подряд: <a href="#">вот</a> <a href="#">ссылка</a>. Ссылки разделенные короткими словами/символами: <a href="#">ссылка</a> вот <a href="#">ссылка</a>, <a href="#">ссылка</a>. Длинными словами: <a href="#">ссылка</a> длинная <a href="#">ссылка</a>. Скобочки: (<a href="#">ссылка</a>), <a href="#">ссылка</a> (<a href="#">ссылка</a>). <a href="#">Конец</a></div>
CWordEdit = {
init: function() {
var content = $("#result").html(),
letter = "",
newWord = 0,
word = "",
wordsArray = [],
links = [],
wordLen = 0,
tagFlag = false,
aFlag = false;
for (var i = 0; i < content.length + 1; i++) {
letter = this.getLetter(i, 1, content);
if (letter == "<") {
tagFlag = true;
if (this.getLetter(i+1, 1, content) == "a") {
aFlag = true;
wordsArray[newWord] = word.trim();
if ((newWord > 0 && links[i-1] == "") || word.length > 0) {
newWord++;
}
word = "";
links[newWord] = "";
}
}
if (!tagFlag && !aFlag) {
if ((letter != " " || (wordLen <= 3 && this.getLetter(i+1, 2, content) != "<a")) && (i<content.length)) {
word += letter;
wordLen++;
if (!this.notEnding(letter) && this.notEnding(this.getLetter(i+1, 1, content))) {
links[newWord] = "";
wordsArray[newWord++] = word;
word = "";
}
} else {
links[newWord] = "";
wordsArray[newWord++] = word.trim();
word = "";
}
} else if (aFlag) {
links[newWord] += letter;
}
if (letter == " ") {
wordLen = 0;
}
if (letter == ">") {
if (this.getLetter(i-2, 2, content) == "/a") {
aFlag = false;
wordsArray[newWord++] = "";
}
tagFlag = false;
}
}
content = "";
for (i = 0; i < wordsArray.length; i++) {
if (wordsArray[i] != "") {
content += "<span class='ew'>" + wordsArray[i] + "</span>";
if ("({[".indexOf(wordsArray[i])) {
content += " ";
}
} else {
if (wordsArray[i-1] == "") {
content += " ";
}
content += links[i];
if ((i+1) < wordsArray.length) {
if (this.notEnding(wordsArray[i+1].charAt(0))) {
content += " ";
}
}
}
}
$("#result").html(content);
this.renderClicks();
this.finishEdit();
},
getLetter: function(i, q, editContent) {
return editContent.substring(i, i+q);
},
renderClicks: function() {
$("#result .ew").live("click", function(){
var chosenWord = $(this).html(),
width = $(this).width();
$(this).replaceWith("<input type='text' value='" + chosenWord + "' style='width:"+ width + "px' />");
$("#result input").focus();
});
},
notEnding: function(letter) {
return !(".,!?;:)]}".indexOf(letter) + 1);
},
finishEdit: function() {
$("#result input").live("blur", function(){
if (!($(this).val().indexOf("<script>") + 1)) {
$(this).replaceWith("<span class='ew'>" + $(this).val() + "</span>");
} else {
$(this).remove();
}
});
}
};
$(document).ready(function(){
CWordEdit.init();
});
|
ну, если работает, то Слава Богу :)
Цитата:
Цитата:
Цитата:
ну и самое ужасное, Вы имеете на руках jQuery, а пишите код на нативном JS : Цитата:
Цитата:
ну и ещё маленький минусик (это не обязательно, но так делать - плохой тон)
finishEdit: function() {
$("#result input").live("blur", function(){
if (!(*!*$(this)*/!*.val().indexOf("<script>") + 1)) {
*!*$(this)*/!*.replaceWith("<span class='ew'>" + *!*$(this)*/!*.val() + "</span>");
} else {
*!*$(this)*/!*.remove();
}
});
}
эти вездесущие $(this) каждый раз исполняют вот этот кусок кода (вся функция по ссылке). оно Вам надо? кешируйте $(this) в переменной, скажем, $this. я быстренько обежал код глазами, в алгоритм не вглядывался (кроме первого, про текстовое поле). |
Поле создаю потому что оно появляется на месте редактируемого слова, может конечно некорректно Вас понял и можно одним инпутом это решать.
В спаны оборачиваю чтобы при наведении курсора происходило выделение фрагмента, так как фрагменты можно редактировать несколько раз. А вообще спасибо за советы, учту все, что Вы написали) |
Цитата:
редактировании слова. оно одно должно быть на странице - главная мысль. Цитата:
|
| Часовой пояс GMT +3, время: 23:20. |