필터링된 결과를 Angular로 강조 표시JS
ng-repeat과 각진 필터를 사용하고 있습니다.JS는 전화 튜토리얼을 좋아하지만 검색 결과를 강조 표시하고 싶습니다.기본 jQuery에서는 입력 시 키 위의 페이지를 구문 분석했을 뿐이지만, 각도로 해석하려고 합니다.좋은 생각 있어요?
내 코드:
<input id="search" type="text" placeholder="Recherche DCI" ng-model="search_query" autofocus>
<tr ng-repeat="dci in dcis | filter:search_query">
<td class='marque'>{{dci.marque}} ®</td>
<td class="dci">{{dci.dci}}</td>
</tr>
Angular를 위해 그것을 했다.JS v1.2+
HTML:
<span ng-bind-html="highlight(textToSearchThrough, searchText)"></span>
JS:
$scope.highlight = function(text, search) {
if (!search) {
return $sce.trustAsHtml(text);
}
return $sce.trustAsHtml(text.replace(new RegExp(search, 'gi'), '<span class="highlightedText">$&</span>'));
};
CSS:
.highlightedText {
background: yellow;
}
angular ui-module은 하나의 용어만 지원합니다.스코프 함수 대신 다음 필터를 사용하고 있습니다.
app.filter('highlight', function($sce) {
return function(str, termsToHighlight) {
// Sort terms by length
termsToHighlight.sort(function(a, b) {
return b.length - a.length;
});
// Regex to simultaneously replace terms
var regex = new RegExp('(' + termsToHighlight.join('|') + ')', 'g');
return $sce.trustAsHtml(str.replace(regex, '<span class="match">$&</span>'));
};
});
HTML:
<span ng-bind-html="theText | highlight:theTerms"></span>
필터 -> 하이라이트(필터).Keypress 지시문도 있습니다.
index.displaces를 표시합니다.
<!DOCTYPE html>
<html>
<head>
<script src="angular.js"></script>
<script src="app.js"></script>
<style>
.highlighted { background: yellow }
</style>
</head>
<body ng-app="Demo">
<h1>Highlight text using AngularJS.</h1>
<div class="container" ng-controller="Demo">
<input type="text" placeholder="Search" ng-model="search.text">
<ul>
<!-- filter code -->
<div ng-repeat="item in data | filter:search.text"
ng-bind-html="item.text | highlight:search.text">
</div>
</ul>
</div>
</body>
</html>
app.module
angular.module('Demo', [])
.controller('Demo', function($scope) {
$scope.data = [
{ text: "<< ==== Put text to Search ===== >>" }
]
})
.filter('highlight', function($sce) {
return function(text, phrase) {
if (phrase) text = text.replace(new RegExp('('+phrase+')', 'gi'),
'<span class="highlighted">$1</span>')
return $sce.trustAsHtml(text)
}
})
참고 자료 : http://codeforgeek.com/2014/12/highlight-search-result-angular-filter/ 데모 : http://demo.codeforgeek.com/highlight-angular/
간단한 예시로 이해하기 쉬웠으면 합니다.
app.filter('highlight', function() {
return function(text, phrase) {
return phrase
? text.replace(new RegExp('('+phrase+')', 'gi'), '<kbd>$1</kbd>')
: text;
};
});
<input type="text" ng-model="search.$">
<ul>
<li ng-repeat="item in items | filter:search">
<div ng-bind-html="item | highlight:search.$"></div>
</li>
</ul>
각도 부트스트랩에는 스탠드아트의 하이라이트 필터가 있습니다.typeaheadHighlight
사용.
<span ng-bind-html="text | typeaheadHighlight:query"></span>
범위 포함{text:"Hello world", query:"world"}렌더링
<span...>Hello <strong>world</strong></span>
이 스레드에서 @uri의 답변에서 벗어나 단일 문자열 또는 문자열 배열로 작동하도록 수정했습니다.
다음은 TypeScript 버전입니다.
module myApp.Filters.Highlight {
"use strict";
class HighlightFilter {
//This will wrap matching search terms with an element to visually highlight strings
//Usage: {{fullString | highlight:'partial string'}}
//Usage: {{fullString | highlight:['partial', 'string, 'example']}}
static $inject = ["$sce"];
constructor($sce: angular.ISCEService) {
// The `terms` could be a string, or an array of strings, so we have to use the `any` type here
/* tslint:disable: no-any */
return (str: string, terms: any) => {
/* tslint:enable */
if (terms) {
let allTermsRegexStr: string;
if (typeof terms === "string") {
allTermsRegexStr = terms;
} else { //assume a string array
// Sort array by length then join with regex pipe separator
allTermsRegexStr = terms.sort((a: string, b: string) => b.length - a.length).join('|');
}
//Escape characters that have meaning in regular expressions
//via: http://stackoverflow.com/a/6969486/79677
allTermsRegexStr = allTermsRegexStr.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
// Regex to simultaneously replace terms - case insensitive!
var regex = new RegExp('(' + allTermsRegexStr + ')', 'ig');
return $sce.trustAsHtml(str.replace(regex, '<mark class="highlight">$&</mark>'));
} else {
return str;
}
};
}
}
angular
.module("myApp")
.filter("highlight", HighlightFilter);
};
이는 JavaScript에서 다음과 같이 해석됩니다.
var myApp;
(function (myApp) {
var Filters;
(function (Filters) {
var Highlight;
(function (Highlight) {
"use strict";
var HighlightFilter = (function () {
function HighlightFilter($sce) {
// The `terms` could be a string, or an array of strings, so we have to use the `any` type here
/* tslint:disable: no-any */
return function (str, terms) {
/* tslint:enable */
if (terms) {
var allTermsRegexStr;
if (typeof terms === "string") {
allTermsRegexStr = terms;
}
else {
// Sort array by length then join with regex pipe separator
allTermsRegexStr = terms.sort(function (a, b) { return b.length - a.length; }).join('|');
}
//Escape characters that have meaning in regular expressions
//via: http://stackoverflow.com/a/6969486/79677
allTermsRegexStr = allTermsRegexStr.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
// Regex to simultaneously replace terms - case insensitive!
var regex = new RegExp('(' + allTermsRegexStr + ')', 'ig');
return $sce.trustAsHtml(str.replace(regex, '<mark class="highlight">$&</mark>'));
}
else {
return str;
}
};
}
//This will wrap matching search terms with an element to visually highlight strings
//Usage: {{fullString | highlight:'partial string'}}
//Usage: {{fullString | highlight:['partial', 'string, 'example']}}
HighlightFilter.$inject = ["$sce"];
return HighlightFilter;
})();
angular.module("myApp").filter("highlight", HighlightFilter);
})(Highlight = Filters.Highlight || (Filters.Highlight = {}));
})(Filters = myApp.Filters || (myApp.Filters = {}));
})(myApp|| (myApp= {}));
;
생성된 네임스페이스 없이 단순한 JavaScript 구현을 원하는 경우:
app.filter('highlight', ['$sce', function($sce) {
return function (str, terms) {
if (terms) {
var allTermsRegexStr;
if (typeof terms === "string") {
allTermsRegexStr = terms;
}
else {
// Sort array by length then join with regex pipe separator
allTermsRegexStr = terms.sort(function (a, b) { return b.length - a.length; }).join('|');
}
//Escape characters that have meaning in regular expressions
//via: http://stackoverflow.com/a/6969486/79677
allTermsRegexStr = allTermsRegexStr.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
// Regex to simultaneously replace terms - case insensitive!
var regex = new RegExp('(' + allTermsRegexStr + ')', 'ig');
return $sce.trustAsHtml(str.replace(regex, '<mark class="highlight">$&</mark>'));
}
else {
return str;
}
};
}]);
이전에 고장났을 수 있는 수정을 포함하도록 편집되었습니다. 누군가가 검색했습니다..정규 표현에 의미가 있는 다른 문자도 있어요.이제 그 캐릭터들이 먼저 탈출합니다.
검색어가 요소에 포함된 데이터와 관련된 경우 적용되는 ng-class를 사용합니다.
따라서 ng 반복 요소에서는ng-class="{ className: search_query==elementRelatedValue}"
className은 조건이 충족되면 요소에 동적으로 적용됩니다.
하이라이트 솔루션에서는 angular-ui-tree 요소와 함께 사용하였습니다.https://codepen.io/shnigi/pen/jKeaYG
angular.module('myApp').filter('highlightFilter', $sce =>
function (element, searchInput) {
element = element.replace(new RegExp(`(${searchInput})`, 'gi'),
'<span class="highlighted">$&</span>');
return $sce.trustAsHtml(element);
});
css 추가:
.highlighted {
color: orange;
}
HTML:
<p ng-repeat="person in persons | filter:search.value">
<span ng-bind-html="person | highlightFilter:search.value"></span>
</p>
검색 입력을 추가하려면:
<input type="search" ng-model="search.value">
특수 문자의 문제에 대해서는, 도망치는 것만으로 정규식 검색을 할 수 없게 될지도 모른다고 생각합니다.
이건 어때?
function(text, search) {
if (!search || (search && search.length < 3)) {
return $sce.trustAsHtml(text);
}
regexp = '';
try {
regexp = new RegExp(search, 'gi');
} catch(e) {
return $sce.trustAsHtml(text);
}
return $sce.trustAsHtml(text.replace(regexp, '<span class="highlight">$&</span>'));
};
잘못된 regexp는 사용자가 텍스트를 입력하는 것일 수 있습니다.
- 유효: m
- 무효: m[
- 무효: m[o]
- 무효: m[ooo]
- 유효: m[oo]
- 유효: m[oo]n
- 유효: m[oo]ni
- 유효: m[oo]nic
- 유효: m[oo]nica
@Mik Cox는 어떻게 생각하세요?
또 다른 제안:
app.filter('wrapText', wrapText);
function wrapText($sce) {
return function (source, needle, wrap) {
var regex;
if (typeof needle === 'string') {
regex = new RegExp(needle, "gi");
} else {
regex = needle;
}
if (source.match(regex)) {
source = source.replace(regex, function (match) {
return $('<i></i>').append($(wrap).text(match)).html();
});
}
return $sce.trustAsHtml(source);
};
} // wrapText
wrapText.$inject = ['$sce'];
// use like this
$filter('wrapText')('This is a word, really!', 'word', '<span class="highlight"></span>');
// or like this
{{ 'This is a word, really!' | wrapText:'word':'<span class="highlight"></span>' }}
나는 비판의 여지가 있어!;-)
저도 대응하고 있던 일이었는데, 물어봐 주셔서 감사합니다.
단, 두 가지가 있습니다.
첫째, 상위 답변은 훌륭하지만 하이라이트()가 특수문자에 문제가 있다는 코멘트는 정확합니다.이 코멘트는 동작하는 이스케이프 체인을 사용하는 것을 제안하고 있습니다만, 단계적으로 폐지되는 unescape()를 사용하는 것을 제안하고 있습니다.결과:
$sce.trustAsHtml(decodeURI(escape(text).replace(new RegExp(escape(search), 'gi'), '<span class="highlightedText">$&</span>')));
둘째, 데이터 바인딩된 URL 목록에서 이 작업을 수행하려고 했습니다.highlight() 문자열에서는 데이터를 바인드할 필요가 없습니다.
예:
<li>{{item.headers.host}}{{item.url}}</li>
작성자:
<span ng-bind-html="highlight(item.headers.host+item.url, item.match)"></span>
{{}}}에 남겨두고, 여러가지 에러가 발생하는 문제가 있었습니다.
이것이 누구든 같은 문제에 부딪히는 데 도움이 되기를 바랍니다.
자료 한다면 '각진 자료 라이브러리'라는 기본 .md-highlight-text
매뉴얼에서 다음 항목을 참조하십시오.
<input placeholder="Enter a search term..." ng-model="searchTerm" type="text">
<ul>
<li ng-repeat="result in results" md-highlight-text="searchTerm">
{{result.text}}
</li>
</ul>
문서 링크: https://material.angularjs.org/latest/api/directive/mdHighlightText
언급URL : https://stackoverflow.com/questions/15519713/highlighting-a-filtered-result-in-angularjs
'programing' 카테고리의 다른 글
| JSON에 적합한 CLI 툴은 무엇입니까? (0) | 2023.03.31 |
|---|---|
| MVC 4 부트스트랩을 사용한 모달폼 편집 (0) | 2023.03.31 |
| WP 템플릿의 플러그인에서 함수를 호출하려면 어떻게 해야 합니까? (0) | 2023.03.31 |
| React-Select를 프로그래밍 방식으로 지우거나 재설정하는 방법 (0) | 2023.03.31 |
| 특정 WordPress 페이지에 사용자 지정 PHP 코드 삽입 (0) | 2023.03.31 |