我有一个模式,用户可以通过textarea
添加备注。他们能够在文本区域中键入多个空格和换行符。添加注释后,它会立即显示在注释模式中。上面的输入字段允许用户搜索新创建的音符。突出显示跨度包装搜索到的文本。
我正在使用正则表达式创建
和<br/>
,因此textarea中的格式显示在显示的注释中。
问题在于,已创建的
和<br/>
会显示在高亮显示的搜索结果中。
.filter('highlighted', function($sce) {
return function (note, phrase) {
if (phrase) {
//phrase = phrase.replace(/^\ \;|<br?\>*/gi, "").replace().trim("");
note = note.replace(new RegExp('(' + phrase + ')', 'gim'), '<span class="highlighted">$1</span>');
}
return $sce.trustAsHtml(note);
};
})
noteService.getNotes(idPart)
.success(function(result) {
$scope.notes = result.notes;
if ($scope.notes) {
result.notes.forEach(function addDates(notes) {
notes.dateSort = moment(notes.timestamp).format('MMMM D YYYY, h:mm:ss a');
notes.timestamp = moment(notes.timestamp).format('MMM D, YYYY');
notes.notes_raw = notes.note;
var carriage = /\n/g,
space = /\s/g,
findCarriage = notes.note.replace(carriage, "<br/>"),
newstr = findCarriage.replace(space, " ");
notes.note = newstr;
});
}
console.log('success');
})
.error(function() {
$scope.$emit('alert', 'danger', 'Failed to retrieve notes');
console.log("failure");
$modalInstance.close($scope.$parent.$id);
});
<input type="text" class="form-control" ng-model="search.notes" placeholder="Search" aria-describedby="sizing-addon3" />
<ul class="notes-list">
<li ng-repeat="note in notes | filter:search.notes | orderBy:'-dateSort'" class="note well">
<span><strong ng-bind-html="note.timestamp | highlighted:search.notes"></strong> <em ng-bind-html="note.user | highlighted:search.notes"></em></span>
<p ng-bind-html="note.note | highlighted:search.notes"></p>
</li>
</ul>
<textarea autofocus class="form-control" rows="3" id="new-note" ng-model="data.note" maxlength="140" placeholder="Character limit 140 characters" required ng-focus="characterCount();"></textarea>
<button type="submit" class="btn btn-xs btn-info" ng-disabled="partNotes.$invalid" ng-click="add()
">Add</button>
<button type="submit" class="btn btn-xs btn-link" ng-click="clear()" formnovalidate>Clear</button>