mark.제가 js를 써봤어요.

6203 단어 HTMLJavaScriptlibrary
웹 페이지를 만들 때, 때때로 CSS 등에서 페이지의 임의의 문자열을 강조 표시하려고 한다.
이 경우 레이블로 직접 둘러싸여 CSS로 장식할 수 있지만 특정 문자열이나 문자열의 위치를 지정하여 강조 표시하면 편리합니다.
이럴 때 사용할 수 있는 것은 mark.js 이다.

mark.js


공식 페이지는 여기
mark.js는 자바스크립트로 쓴 text high lighter입니다.

예제


한 마디로 하면, 어떤 코드로 어떤 출력을 출력할지 시험해 보자.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
<script src="https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.11.1/mark.min.js"></script>
</head>
<body>
<div id="hoge">今日はいい天気。天気がいいと体調もいい</div>
</body>
</html>
<style>
mark{
    background: orange;
    color: black;
}
</style>
<script>

var hoge = document.querySelector("#hoge");
var instance = new Mark(hoge);

instance.markRegExp(/天気/gmi);

instance.markRanges([{
    start: 0,
    length: 2
}])
</script>
위에서 사용한 것은 cdn이 제공한 파일입니다.
출력은 다음과 같습니다.(웹 페이지의 스크린샷)

날씨 문자열의 강조 표시는 정규 표현식을 통해 이루어집니다.
instance.markRegExp(/天気/gmi);
'오늘'문자열의 하이라이트는 시작 위치 (start) 와 하이라이트 대상 문자열의 길이 (length) 를 지정합니다.
instance.markRanges([{
    start: 0,
    length: 2
}])
css 부분을 변경함으로써 하이라이트의 색깔과 사이즈 등을 변경할 수 있습니다.
이것은 실제 동적으로 생성된 HTML 부분이 다음과 같기 때문이다.

따라서 동일한 레이블 내의 문자열에 다른 CSS를 할당할 수 없습니다.

mark()

mark 함수를 사용하여 mark 태그를 임의의 태그로 변경할 수 있습니다.
다음과 같이 mark 함수에 옵션을 지정하여 원래 mark 태그의 일부가 지정된 태그로 변경됩니다.
instance.mark("天気", {"element": "span"});

자세한 옵션은 공식 문서 의 4.2 mark () 를 참조하십시오.filter 옵션은 특정 문자열의 하이라이트 수를 제한할 수도 있습니다.

브라우저 호환성 정보


이 글의 집필 시간은 아래의 현대 브라우저와 대응한다.
  • Firefox (30+)
  • Chrome (30+)
  • Safari (7+)
  • Edge (13+)
  • IE (9+)
    • LeetCode Online Judge 제목 C# 연습 - Largest Rectangle in Histogram
    VSCode의 TODO 목록

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage