通过添加跨度标签突出显示文本文件中的文本

Posted 2023-05-09

【中文标题】通过添加跨度标签突出显示文本文件中的文本

【英文标题】：Highlighting the text from the text file by adding span tags

【发布时间】：2018-10-02 10:11:10

【问题描述】：

我是angular js和javascript的新手。在这里，我有文档或文本文件，可以说是 ->

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 has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and

所以，为了从后端突出显示此文本，我得到了偏移量，我的意思是该字符串的 startoffset 和 endoffset。

那么，那我用下面的方法来高亮文字。

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

所以，它用 span 标签替换了这个文本。现在，正因为如此，在我的数组中，我有超过 1 个需要在本文中突出显示的元素。 因此，我从后端获得的偏移量会发生变化。因此，我使用了以下逻辑 ->

var length = '<span class="mark"></span>'.length:
jsonDataArray.forEach(function(item, index) 
    responseData = $scope.highlightHTML(responseData, item.startOffset + (index * length), item.endOffset + (index * length));
);

但这是主要问题。

现在让我们说现在我想突出显示文本1500s，现在在这里当涉及到找到这个字符串的偏移量时，它将与新的乘法逻辑不匹配。因为这个1500's 部分是以前突出显示的字符串。

前一个字符串将是

<span class="mark">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and</span>

现在我想突出显示1500s。然后，如果我相乘，那么它将不会采用完美的偏移量，因此不会使字符串突出显示。

那么，我该如何解决这个问题？谁能帮我解决这个问题？

【问题讨论】：

您认为plnkr.co/edit/h2mh1MuJGzxOaYFLU7Up?p=preview 可能有帮助吗？如果是，我可以提供建议。您可以使用相同的功能添加颜色或突出显示

是的，任何想法都可以拯救我的一天

【参考方案1】：

因此，正如上面 cmets 中所要求的，您可以创建一个组件来对文本应用不同的样式。 Take a look at this plunkr，您也可以参考execCommand link 了解更多可以添加的功能。

例如：

 $window.document.execCommand('foreColor', false,'red');

会将颜色 red 添加到您的文本中。

最好的部分是您不必担心styling 和tags 关闭，它们都会自动处理。

您可以加注星标并观看this git repo 以了解我很快会继续添加的新功能。我在这里展示了如何将ng-model 与外部组件绑定，以便您也可以从中提取数据。

请确保您在应用此功能时限制了可以做的事情，因为您将被允许做几件事（在您的情况下这可能不是预期的行为）。所以相应地实施。

更新

Check this file。您可以从 Git 拉取/下载代码

【讨论】：

您好，感谢您的帮助。实际上，我已经在使用 TextAngular 了。

能否请您提供一些关于突出显示的想法？

@ganeshkaspate：检查问题中更新的 plunkr。所有命令都在提供的链接中。请通过它们

@ganeshkaspate ：我认为您应该在实施textAngular1 之前了解业务需求，原因是，您将无法根据您对所有内容的需求进行扩展和自定义。例如：在我的编辑器中你可以从local machineadd 图像。你必须在 textAngular 中探索的东西。因此，请考虑所有方面，然后再考虑其实施。添加表格也一样

能否请您添加如何使用您的编辑器？这会有所帮助

【参考方案2】：

为什么要使用偏移量而不是字符串的长度？ 最好的选择是使用 jquery 来读取要突出显示的特定文本的长度（因为字符串文本可以是动态的）。 1. 到达第一个字符，然后将长度添加到字符串中。 2.使用上面的突出显示文本。

jquery - $('#... span'), ....关注你的元素... range.setStart(来自前一个焦点元素的焦点元素，" + str( result) + ");range.setEnd(焦点元素的结尾," + str(result + len(在这里输入代码 name)) + ");sel = window.getSelection();enter code heresel.removeAllRanges();sel.addRange(range);"

您可以从任何标签中进行选择，无需添加跨度标签或替换文本。