通过添加跨度突出显示文本文档中的字符串 [英] Highlight a string from the text document by adding spans

问题描述

我是 webDevelopment 的新手.我有包含一些文本的字符串.现在我想突出显示该文本文件中的一些单词.所以，我在这里使用这个逻辑

I am new to webDevelopment. I have string which has some text.Now I want to highlight some words from that text file . So, Here I am using this logic

$scope.highlightHTML = function (content,startoffset,endoffset,color) {
          var className = 'mark';
          console.log(content.substring(startoffset, endoffset));
          return content.replace(content.substring(startoffset, endoffset), '<span class="' + className + '">$&</span>');
}

现在一切正常.但是现在发生的情况是，当第一个单词被突出显示，然后当它尝试突出显示第二个单词时，由于这种替换，字符串偏移量会发生变化.它也需要标记，现在偏移量正在改变.现在，当我突出显示某些文本时，下次它不应采用跨度标记的开始和结束偏移量的偏移量.那么，我该怎么做?

Now this is working fine. But Now what happens is when first word gets highlighted and then when It tries to highlight the second word then the strings offsets are getting changed because of this replacing . It takes tag as well so, now offsets are getting changed. now when I highlight some text then next time it should not take offsets of start and end offset of the span tag . SO, How can I do this ?

它就像，Lorem Ipsum 只是印刷和排版行业的虚拟文本.自 1500 年代以来，Lorem Ipsum 一直是行业标准的虚拟文本，当时一位不知名的打印机使用了一个类型的厨房并把它打乱做一个活字样书，它不仅存活了五个世纪，而且还经历了电子排版的飞跃，基本保持不变"

我有这个字符串.现在，我想突出显示 when an unknown printer take a galley of 现在，为此我使用子字符串，因为我从后端本身获取开始和结束.我只用标记标签替换那个字符串.

I have this string. Now, I want to highlight when an unknown printer took a galley of Now, for this I use substring because I get the start and end from back-end itself. I replace only that string with mark tag.

现在问题就在这之后，如果我想突出而且还要跳到电子排版，那么我从后端得到的偏移量将没有用，因为在替换第一个字符串时我添加了 span 标签，所以它也采用了 span 标签偏移量.因此，它也没有通过提供偏移量来获得确切的字符串.它给了我另一个字符串，因为偏移量已经改变.现在，通过添加 span 标记不应更改突出显示的偏移量.

Now The problem is after this immediately,If I want to highlight but also the leap into electronic typesetting, Then the offset which I got from the backend will not be useful because while replacing the first string I added span tag, so it is taking the span tag offsets as well. So, Its not getting me the exact string by providing the offsets as well. It gives me some another string because offsets has changed. Now, whil highlighting the offsets should not get changed by adding the span tag.

Ajax 调用 -

jsonDataArray.forEach(function (item) {
                  responseData = $scope.highlightHTML(responseData,item.startOffset,item.endOffset,item.color);
                  $rootScope.data.htmlDocument = responseData.replace(/\n/g, "</br>");;
                });

推荐答案

您可以通过使用以下逻辑使用字符串的长度来实现这一点.

You can achieve this by using the length of the string using below logic.

我正在为您文本中的 'simply dummy'、'and typesetting'、'Ipsum has been' 添加跨度.

I'm adding span to 'simply dummy', 'and typesetting', 'Ipsum has been' in your text.

我所做的是在函数调用后更新文本之后，我将初始文本长度和更新文本长度之间的差异添加到再次调用该函数的偏移量中，这给了我单词的确切偏移量.

what i have done is after the text has been updated after the function call, i am adding the difference between the initial text length and updated text length to the offeset which calling the function again which gives me the exact offsets of the words.

请告诉我它是否适合您.

Please let me know whether its works for you.

更新了ajax:

var initialLength = responseData.length;
var updatedLength = 0;
jsonDataArray.forEach(function(item, index) {
  if (index == 0)
    responseData = $scope.highlightHTML(responseData, parseInt(item.startOffset), parseInt(item.endOffset), item.color);
  else
    $scope.highlightHTML(responseData, parseInt(item.startOffset) + (updatedLength - initialLength), parseInt(item.endOffset) + (updatedLength - initialLength), item.color);
    updatedLength = responseData.length;
    $rootScope.data.htmlDocument = responseData.replace(/\n/g, "</br>");;
});

$(document).ready(function() {
  var text = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged";
  var initialLength = text.length;
  var updatedLength = 0;
  var startoffset1 = 15;
  var endoffset1 = 27;
  var startoffset2 = 49;
  var endoffset2 = 64;
  var startoffset3 = 81;
  var endoffset3 = 95;
  console.log(text.substring(startoffset1, endoffset1));
  console.log(text.substring(startoffset2, endoffset2));
  console.log(text.substring(startoffset3, endoffset3));
  text = highlightHTML(text, startoffset1, endoffset1, 'green');
  updatedLength = text.length;
  text = highlightHTML(text, startoffset2 + (updatedLength - initialLength), endoffset2 + (updatedLength - initialLength), 'green');
  updatedLength = text.length;
  text = highlightHTML(text, startoffset3 + (updatedLength - initialLength), endoffset3 + (updatedLength - initialLength), 'green');
  console.log(text);
});

function highlightHTML(content, startoffset, endoffset, color) {
  var className = 'mark';
  console.log('Inside Function: ' + content.substring(startoffset, endoffset));
  return content.replace(content.substring(startoffset, endoffset), '<span class="' + className + '">$&</span>');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

这篇关于通过添加跨度突出显示文本文档中的字符串的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！