javascript - 通过添加 span 突出显示文本文档中的字符串

Question

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

$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>');
}

现在一切正常。但是现在发生的事情是当第一个单词被突出显示然后当它试图突出显示第二个单词时字符串偏移量会因为这个替换而改变。它也需要标签，现在偏移量正在改变。现在，当我突出显示一些文本时，下次它不应该采用 span 标记的开始和结束偏移量的偏移量。那么，我该怎么做？

它就像，“Lorem Ipsum 只是打印和排版行业的虚拟文本。自 1500 年代以来，Lorem Ipsum 一直是行业的标准虚拟文本，当时一位未知的打印商拿走了一排字体并将其打乱为做一本活字标本，不仅活了五个世纪，还飞跃到电子排版，基本保持不变”

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

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

Ajax 调用 -

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

Answer 1

您可以使用以下逻辑使用字符串的长度来实现此目的。

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

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

请告诉我它是否适合您。

更新的 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>