User JavaScript and CSS - 문자열 앞 해시태그 추가 및 공백제거

User JavaScript and CSS

문자열 앞 해시태그 추가 및 공백제거

User JavaScript and CSS 확장프로그램을 활용하여 해당 사이트의 JavaScript를 추가하거나 수정할 수 있습니다.
Stylebot의 확장 기능인 User JavaScript and CSS를 통해서 해당 해시태그를 수정하거나 추가해줄 수 있다.

 

참고 콘텐츠

웹사이트 코드 변경 크롬 확장프로그램 'User JavaScript and CSS'

사이트를 내 마음대로 바꾸는 구글확장프로그램 - Stylebot, Stylus

 

 

1. 사용 예제

/* HTML Container 적용 */
$('.sp_nkeyword .api_subject_bx .related_srch .lst_related_srch .keyword .tit')
	.before('<span class="tit">#</span>');

/* CSS inline 적용 */
.sp_nkeyword .api_subject_bx .related_srch .lst_related_srch .keyword .tit {
    display: inline;
}

위의 해시태그를 추가하여 .before() 을 통해 문자열 앞에 내용이나 속성을 추가할 수 있고 .Replace() 정규식을 통해서 단어 또는 문자열 사이의 공백을 제거하여 쉽게 해시태그로 활용할 수 있게 됩니다.

 

위의 적용하기 전 이미지와 적용한 후의 이미지를 비교해보세요. 해시태그가 추가되었으며, 네이버블로그로 본문에 해시태그를 추가할 때, 주제 연관성이 높은 연관 검색어를 쉽게 해시태그로 추가할 수 있게 되었습니다.

 

2. 사용의 목적

따라서, 해시태그를 복사하거나 편하게 붙여넣기를 하기 위해서 중간 공백을 삭제하거나 해시태그를 추가하기 쉽기 때문에 해시태그를 추가하는 시간을 효율적으로 단축시킬 수 있게 됩니다.

티스토리의 경우, .before()에 comma(,)를 추가하게 되면 단어와 단어가 구분되어 편하게 해시태그를 입력할 수 있다.

 

같이보기

JavaScript(JQuery) 선별선택자·복수선택자

특정 페이지 및 카테고리의 HTML 구조를 변환하기 (IF조건문)

Onclick Event(온클릭 이벤트)

탑버튼(topbtn) DOM 위치값 계산