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

问题描述

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

  $ scope.highlightHTML = function（content，startoffset，endoffset，color）{
 var className ='mark'; 
 console.log（content.substring（startoffset，endoffset））; 
返回content.replace（content.substring（startoffset，endoffset），'< span class ='+ className +'> $&< / span>'）; 
} 
  

现在这个工作正常。但现在发生的事情是当第一个单词被突出显示然后当它试图突出显示第二个单词时，字符串偏移因为这个替换而变得更改。它也需要标签，所以现在偏移正在发生变化。现在，当我突出显示一些文本时，下一次不应该使用span标记的起始偏移和结束偏移。那么，我该如何做到这一点呢？

就像Lorem Ipsum只是印刷和排版行业的虚拟文本。这是自16世纪以来的行业标准虚拟文本，当时一台未知的打印机采用了一种类型的厨房，并将其制作成样板书，它不仅在五个世纪中存活下来，而且还在电子排版的基础上保持基本不变 / code>





我有这个字符串。现在，当一个未知的打印机占用的厨房时，我想突出显示。现在，为此我使用子字符串，因为我从后端本身获取了开始和结束。

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

Ajax调用 -

  jsonDataArray.forEach（function（item）{
 responseData = $ scope.highlightHTML（responseData，item.startOffset，item.endOffset，item.color）; 
 $ rootScope。 data.htmlDocument = responseData.replace（/ \\\
 / g，< / br>）;; 
}）; 
  

解决方案

您可以通过使用字符串的长度使用下面的逻辑。

我将跨度添加到'简单的虚拟'，'排版'，'Ipsum已经'


我所做的是在函数调用后更新文本之后，我添加了初始文本长度和更新之间的差异文字长度的thefeset，再次调用函数，这给了我的确切偏移的话。

请让我知道它是否适合你。

已更新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（/ \\\
 / g，< / br>）;; 
}）; 
  

$ （文档）.ready（函数（）{var text =Lorem Ipsum仅仅是印刷和排版行业的虚拟文本.Lorem Ipsum自从16世纪以来一直是业界标准的虚拟文本，当时一台未知的打印机采用了一种类型的厨房并且它拼凑成一本类型的标本书。它不仅存活了五个世纪，而且还延续了电子排版，基本保持不变; 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）;}）;函数highlightHTML（content，startoffset，endoffset，color）{var className ='mark'; console.log（'Inside Function：'+ content.substring（startoffset，endoffset））; return< / span>> $&< pre>

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

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 ?

Its like , "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"

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.

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 call -

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.

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.

Updated 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屋！