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

我有这个字符串。现在，我想强调when an unknown printer took a galley of现在，为此，我使用子字符串，因为我从后端本身得到了开始和结束。我只用标记标记替换该字符串。

现在问题就在于此之后，如果我想要突出显示but also the leap into electronic typesetting，那么我从后端获得的偏移将没有用，因为在替换第一个字符串时我添加了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'的范围。

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

请告诉我它是否适合您。

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

Answer 2

您可以将原始内容保留为全局变量吗？

因此，您无需担心添加的span标记会更改偏移量。

更新代码

var responseData;
function readFile() {
    responseData = 'Lorem ipsum dolor sit amet, consectetur .....'
}

var highlightNeeded = []

jsonDataArray.forEach(function (item) {
    var actualText = responseData.substring(item.startOffset, item.endOffset)
    highlightNeeded.push(highlightNeeded)
});

// call this after foreach finished 
var tmpData = $scope.highlightHTML(responseData, highlightNeeded, item.color);
$rootScope.data.htmlDocument = tmpData.replace(/\n/g, "</br>");;

$scope.highlightHTML = function (content, listOfText, color) {
    var className = 'mark';
    listOfText.forEach(function (text) {
        var regex = new RegExp(text, 'gi')
        content.replace(regex, '<span class="' + className + '">$&</span>');
    })
}

Answer 3

有时候，没有任何理由保持神秘和简洁是很酷的......最后它仍然可以不那么神秘！

所以我的版本使用的是html <mark>和<wbr>代码。

从我看来，没有太多需要融合非相关功能，它失去了所有的多功能性/可移植性。

let ߐ = document.body
function check(_ૐ){
ߐ.innerHTML=ߐ.innerHTML.replace(_ૐ,"<mark>"+_ૐ+"</mark>")
}

check("when an unknown printer took a galley of")

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

mark标记非常适合突出显示，因为它是为此而设的，wbr有一些特殊的魔法。

wbr ：在UTF-8编码页面上，其行为类似于U + 200B ZERO-WIDTH SPACE   代码点。特别是，它的行为类似于Unicode bidi BN代码   点，意味着它对双向订购没有影响：123,456显示，当没有在两条线上打破时，   123,456而不是456,123。

出于同样的原因，该元素不会引入连字符   在换行点。使连字符仅出现在结尾处   换行，使用软连字符实体（）代替。

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/wbr

此处标记将在8秒后消失，而不会破坏文本。

let ߐ = document.body
function check(_ૐ){
ߐ.innerHTML=ߐ.innerHTML.replace(_ૐ,"<mark>"+_ૐ+"</mark>")
window.setTimeout(Ώ,8000)}
function Ώ(){
ߐ.innerHTML=ߐ.innerHTML.replace("mark","wbr")}

check("when an unknown printer took a galley of")

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

来源：https://codepen.io/Nico_KraZhtest/pen/mEjBdj

对于您的确切查询，它可以看起来像这样：

jsonDataArray.forEach(function (item) {
                  responseData = $scope.highlightHTML(responseData,item.startOffset,item.endOffset,item.color);
                  $rootScope.data.htmlDocument = responseData.replace("when an unknown printer took a galley of","<mark>"+"when an unknown printer took a galley of"+"</mark>")
                });

或者，更好的是：

let search = "when an unknown printer took a galley of"
jsonDataArray.forEach(function (item, search) {
                  responseData = $scope.highlightHTML(responseData,item.startOffset,item.endOffset,item.color)
                  $rootScope.data.htmlDocument = responseData.replace(search,"<mark>"+search+"</mark>")
                })

通过添加跨度突出显示文本文档中的字符串

3 个答案: