使用已保存的索引重现HTML文本

时间:2016-10-20 21:36:00

标签: javascript html

我并不完全确定如何授权这个问题,但现在就这样了。我有一个应用程序,允许登录用户突出显示文本区域。鉴于文字:

  

Lorem Ipsum只是打印和排版的虚拟文本   行业。

假设此文本保存在数据库中,并在用户登录时加载。用户还可以突出显示文本中的区域以创建以下html:

ReadWriteLock

其中&#34; Lorem Ipsum&#34;和&#34;印刷文本&#34;都突出了。我有javascript工作,它将<p> <mark>Lorem Ipsum</mark> is simply dummy <mark>text of the printing</mark> and typesetting industry. </p> 标签注入正确的位置,现在我需要找到一种方法,在用户重新登录时基本上重新创建突出显示的区域。一种方法是使用<mark>标签保存整个html元素,但由于这些段落可能会变得很长,这对我来说似乎效率极低,特别是当你考虑到许多用户会使用它时你会这么做必须为每个用户复制这么多内容。

我想也许另一种方法是保存字符串中<mark>标签出现位置的索引,但这听起来很棘手,因为一旦你将<mark>标签插入字符串并且(非常)原始保存的字符串中没有任何html(在数据库中)。

我有没有想过的更简单的方法?

1 个答案:

答案 0 :(得分: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);
  }
});

这样,您只能将数组本身存储在数据库中,然后在用户重新加载页面时恢复标记。

&#13;
&#13;
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);
&#13;
&#13;
&#13;