#javascript #html
#javascript #HTML
Вопрос:
Я не совсем уверен, как озаглавить этот вопрос, но вот он. У меня есть приложение, которое позволяет зарегистрированным пользователям выделять области текста. Учитывая текст:
Lorem Ipsum — это просто фиктивный текст, используемый в индустрии печати и набора текста.
Предположим, что этот текст сохранен в базе данных и загружается при входе пользователя в систему. Пользователь также может выделить области в тексте, чтобы создать следующий html:
<p>
<mark>Lorem Ipsum</mark> is simply dummy <mark>text of the printing</mark> and typesetting industry.
</p>
где были выделены «Lorem Ipsum» и «текст печати». У меня работает javascript, который вставляет <mark> теги в нужное место, теперь мне нужно найти способ по существу воссоздать выделенные области при повторном входе пользователя в систему. Один из способов — сохранить весь html-элемент с <mark> тегами, но поскольку эти абзацы могут быть очень длинными, мне это кажется крайне неэффективным, особенно если учесть, что многие пользователи будут использовать это, и вам придется копировать такой объем контента для каждого пользователя.
Я подумал, может быть, другой способ — сохранить индексы того, где в строке встречаются <mark> теги, но это звучит сложно, потому что индексы меняются, как только вы вставляете <mark> теги в строку, а в (самой) оригинальной сохраненной строке нет никакого html (в базе данных).
Есть ли более простой способ, о котором я не думаю?
Комментарии:
1. Я просто хочу убедиться, что у меня это правильно: пользователь может выделять части текста, которые остаются выделенными, и вы хотите, чтобы основные моменты сохранялись, когда пользователь возвращается на страницу?
2. ДА. В настоящее время в базе данных хранится строка текста. Теперь пользователь входит в систему, выделяет часть текста, и я хочу иметь возможность сохранять эти части, чтобы при повторном входе пользователя в систему эти части оставались выделенными. В идеале без сохранения всего абзаца с html-тегами, поскольку мои абзацы могут стать длинными, и, кроме того, исходный неосвещенный html-текст уже сохранен в базе данных, мне просто по существу нужно сохранить расположение
markтегов.3. Возможным подходом может быть сохранение индекса начала каждого тега метки открытия И закрытия независимо от ДРУГИХ тегов метки. Восстановление всего выделенного текста может быть выполнено путем чтения исходного текста с начала, пока вы не дойдете до сохраненного индекса, вставьте тег Open или Close (альтернативным способом) и переходите к чтению исходного текста без изменения индекса. Более того, при таком подходе, когда пользователь снимает пометку с текста, вам не нужно беспокоиться об изменении индексов других выделенных областей.
Ответ №1:
Вы можете получить индексы каждой <mark> / </mark> пары следующим образом:
var s = '<mark>Lorem Ipsum</mark> is simply dummy <mark>text of the printing</mark> and typesetting industry.';
var a = [];
while(/<mark>/.test(s)) {
a.push(s.indexOf('<mark>'));
s= s.replace('<mark>','');
a.push(s.indexOf('</mark>'));
s= s.replace('</mark>','');
}
Обратите внимание, как теги удаляются при разборе строки.
Затем вы можете восстановить теги, выполнив итерацию в обратном направлении по массиву:
a.reverse().forEach(function(v, i) {
if(i%2===0) {
s = s.slice(0,v) '</mark>' s.slice(v);
} else{
s = s.slice(0,v) '<mark>' s.slice(v);
}
});
Таким образом, вы можете сохранить в базе данных только сам массив, а затем восстановить метки, когда пользователь перезагружает страницу.
var s = '<mark>Lorem Ipsum</mark> is simply dummy <mark>text of the printing</mark> and typesetting industry.';
var a = [];
while(/<mark>/.test(s)) {
a.push(s.indexOf('<mark>'));
s= s.replace('<mark>','');
a.push(s.indexOf('</mark>'));
s= s.replace('</mark>','');
}
console.log('marks removed: ' s);
a.reverse().forEach(function(v, i) {
if(i%2===0) {
s = s.slice(0,v) '</mark>' s.slice(v);
} else{
s = s.slice(0,v) '<mark>' s.slice(v);
}
});
console.log('marks restored: ' s); Комментарии:
1. Отлично, это потрясающе!