Недавно написал свой скрипт для замены слов в тексте, результат работы здесь:
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();
});