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

我是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标记的开始和结束偏移量。 那么，我该怎么做？

"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"像是， "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现在when an unknown printer took a galley of ，为此我使用子串，因为我从后端本身得到了开始和结束。 我只用标记标记替换该字符串。

现在问题是在此之后立即，如果我想突出显示， but also the leap into electronic typesetting ，那么我从后端得到的偏移将没有用，因为在替换第一个字符串时我添加了span标记，所以它采取了跨度标签偏移量。 所以，它也没有通过提供偏移来获得确切的字符串。 它给了我另一个字符串，因为偏移已经改变。 现在，不应该通过添加span标记来突出显示偏移量。

Ajax调用 –

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

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, "");; }); 

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

Answer 2

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

所以我的版本使用html 和标签。

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

 let ߐ = document.body function check(_ૐ){ ߐ.innerHTML=ߐ.innerHTML.replace(_ૐ,""+_ૐ+"") } 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 

Answer 3

你能将原始内容保存到全局变量吗？

因此，您无需担心添加的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, "");; $scope.highlightHTML = function (content, listOfText, color) { var className = 'mark'; listOfText.forEach(function (text) { var regex = new RegExp(text, 'gi') content.replace(regex, '$&'); }) }