Question

我是angular js和javascript的新手。在这里，我有文件或文本文件，比如说 - ＆gt;

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个元素，我需要在本文中突出显示。因此，我从后端获得的偏移量将会改变。为此，我使用了以下逻辑 - ＆gt;

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。然后，如果我乘以那么它将不会采取完美的偏移量，因此不会让字符串突出显示。

那么，我该如何解决这个问题呢？任何人都能帮助我吗？

Answer 1

因此，正如上面的评论所述，您可以创建一个组件，以便为文本应用不同的样式。 Take a look at this plunkr，您还可以参考execCommand link了解您可以添加的更多功能。

例如：

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

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

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

你可以加注星标＆amp;请this git repo注意我即将添加的新功能。我在这里展示了如何将ng-model绑定到外部组件，以便您也可以从中提取数据。

确保，您正在限制应用此功能时可以执行的操作，因为您将被允许执行多项操作（在您的情况下可能不是预期的行为）。所以相应地实施。

更新

Check this file。您可以从Git

中提取/下载代码

Answer 2

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

jquery-$（'＃... span'），....专注于您的元素... range.setStart（以前的焦点元素中的焦点元素，“ + str（ result）+“）; range.setEnd（聚焦元素的结尾，” + str（result + len（在此处输入代码 name））+“）; sel = window.getSelection（）; enter code here sel.removeAllRanges（）; sel.addRange（range）;”

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

通过添加span标记突出显示文本文件中的文本

2 个答案:

更新