JSFiddle - React, Tailwind, and code Playground

by xxxvvvxxx

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="content">
	<div class="container">
		<div class="backdrop">
	    	<div class="highlights"></div>
	  	</div>
	  	<textarea class="t">1내용 키워드 입니다</textarea>
  	</div>
  	<div class="container">
		<div class="backdrop">
	    	<div class="highlights"></div>
	  	</div>
	  	<textarea class="t">내용입니다</textarea>
  	</div>
  	<div class="container">
		<div class="backdrop">
	    	<div class="highlights"></div>
	  	</div>
	  	<textarea class="t">내용입니다</textarea>
  	</div>
  	<div class="container">
		<div class="backdrop">
	    	<div class="highlights"></div>
	  	</div>
	  	<textarea class="t">내용입니다 사과</textarea>
  	</div>
  	<div class="container">
		<div class="backdrop">
	    	<div class="highlights"></div>
	  	</div>
	  	<textarea class="t">1 내용입니다</textarea>
  	</div>
  	<div class="container">
		<div class="backdrop">
	    	<div class="highlights"></div>
	  	</div>
	  	<textarea class="t">내용 원숭이</textarea>
  	</div>
  	<div class="container">
		<div class="backdrop">
	    	<div class="highlights"></div>
	  	</div>
	  	<textarea class="t">곰 내용</textarea>
  	</div>
</div>
<div class="keyword">
  <textarea>1</textarea>
  <textarea>사과</textarea>
  <textarea></textarea>
  <textarea>키워드</textarea>
  <textarea></textarea>
  <textarea>곰</textarea>
  <textarea>원숭이</textarea>
</div>

CSS

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

*, *::before, *::after {
	box-sizing: border-box;
}

.container, .backdrop, textarea {
	width: 200px;
	height: 100px;
}

.highlights, textarea {
	padding: 10px;
	font: 20px/28px 'Open Sans', sans-serif;
	letter-spacing: 1px;
}

.container {
	display: block;
	transform: translateZ(0);
	-webkit-text-size-adjust: none;
}

.backdrop {
	position: absolute;
	z-index: 1;
	border: 2px solid #685972;
	background-color: #fff;
	overflow: auto;
	pointer-events: none;
	transition: transform 1s;
}

.highlights {
	white-space: pre-wrap;
	word-wrap: break-word;
	color: transparent;
}

textarea.t {
	display: block;
	position: absolute;
	z-index: 2;
	margin: 0;
	border: 2px solid #74637f;
	border-radius: 0;
	color: #444;
	background-color: transparent;
	overflow: auto;
	resize: none;
	transition: transform 1s;
}

mark {
	border-radius: 3px;
	color: transparent;
	background-color: #b1d5e5;
}
.content {
	display: flex;
    flex-wrap: wrap;
}

JavaScript

var keyword_list = document.querySelectorAll('.keyword textarea');
var content_list = document.querySelectorAll('.content textarea');
keyword_list.forEach((element, index) => {
	for(var i = index+1; i < content_list.length; i++ ){
    	if(content_list[i].value.indexOf(element.value) !== -1 && element.value != ''){
        	console.log(i+ "단계에 있습니다");
        	var text = content_list[i].value;
			var highlightedText = applyHighlights(text, element.value);
			$(content_list[i]).parent().find(".highlights").html(highlightedText);
        	break;
      	}
	}
});

function applyHighlights(text, key) {
  	text = text.replace(/\n$/g, '\n\n').replace(new RegExp(key, "g"), "<mark>$&</mark>");
    return text;
}