이 기사의 예에서는 JavaScript가 웹페이지 키워드를 식별하고 렌더링하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.
다음은 웹 페이지 키워드를 지능적으로 식별하고 이를 빨간색으로 표시하는 JavaScript의 데모입니다. JS를 사용하여 추가하는 방법은 누구나 익숙할 것입니다. 빨간색 키워드는 프로그램으로 제어되는 출력보다 낫습니다. 게다가 일부 기능은 클라이언트의 브라우저로 전달되므로 그에 따라 서버에 대한 부담이 줄어듭니다.
실행 중인 효과의 스크린샷은 다음과 같습니다.
온라인 데모 주소는 다음과 같습니다.
http: //demo.jb51.net/ js/2015/js-keyword-show-red-color-codes/
구체 코드는 다음과 같습니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS查询替换关键字</title>
<style type="text/css">
span{color:#f00;font-weight:bold;}
</style>
</head>
<body>
<p>我是标题:这里是文字介绍!</p>
<p>我是老二:老二的描述性文字。</p>
<script type="text/javascript">
var ps = document.getElementsByTagName('p');
for(i=0;i<ps.length;i++){
var text = ps[i].innerHTML;
var index = text.indexOf(':');
var span = document.createElement('span');
span.innerHTML = text.substring(0,index+1);
ps[i].innerHTML = text.substring(index+1);
ps[i].insertBefore(span,ps[i].firstChild);
}
</script>
</body>
</html>위의 내용은 이 장의 전체 내용입니다. 더 많은 관련 튜토리얼을 보려면 JavaScript 비디오 튜토리얼을 방문하세요.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
