라이브러리 브랜드

Korean English Japanese

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

공유하기
반응형

User JavaScript and CSS
User JavaScript and CSS

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

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

 

참고 콘텐츠

 

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

사이트를 자유롭게 변경하는 크롬 확장프로그램 기능이 간결하면서도 매우 강력하게 적용이 되고 오작동 없이 깔끔하게 사용할 수 있는 확장프로그램입니다. UI/UX도 매우 직관적으로 잘 되어

creativestudio.kr

 

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

사이트를 내 마음대로 바꾸는 구글확장프로그램 - Stylebot, Stylus 웹서핑을 하다보면 어떤 사이트의 경우 가독성이 좋지 않거나, 자주 이용하는 사이트에서 보기 싫은 부분이 있을 수가 있다. 여러

creativestudio.kr

 

 

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) 선별선택자·복수선택자

자바스크립트 내에서 제이쿼리(JQuery) 선택자를 사용할 때, 단일로 사용할 때는 아래와 같이 사용한다. $(.class) : 클래스 선택자 $(#ID) : ID 선택자 $(input:[name='name 값']) 그렇다면 복수의 경우에는 어

creativestudio.kr

 

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

if ( window.location.pathname == '/category/Protect' ) { document.write( ' ' ); } 특정 페이지 HTML 구조변경 해당 내용은 코코소프트의 내용을 참고하여 응용하였습니다. 위 방법으로 간단하게 특정 카테고..

creativestudio.kr

 

Onclick Event(온클릭 이벤트)

온클릭 이벤트 사용법도 매우 쉽고 의외로 많이 사용하는 온클릭 이벤트(HTML DOM)다. DOM Events 중에서 Click 버튼으로 팝업창을 열거나 모달 창으로 안내하는 방식 등 일반 쇼핑몰에서 아주 많이 사

creativestudio.kr

 

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

탑버튼(topbtn) DOM 위치값 계산 $(function(){ var thisTopButton = $('.btn_top'); $(window).on('scroll',function(){ var thisScrollTop = $(this).scrollTop(), thisWindowHeight = $(this).height(), thisPa..

creativestudio.kr

 

반응형
댓글 0
  • 라이브러리 브랜드에 새로운 의견을 남겨주세요.