HTML 문서에서 텍스트를 동적으로 강조 표시하는 방법

사용자가 입력 한 단어의 모든 인스턴스를 강조 표시하기 위해 HTML 페이지 (태그 유형을 공유하지 않음)에 두 개의 요소가 있습니다. 나의 생각은 내가 이러한 요소를 식별 할 수있는 방법, 나는HTML 문서에서 텍스트를 동적으로 강조 표시하는 방법

<font class='highlight'>fox</font>

내 질문은 말할 "여우"의 모든 인스턴스를 대체 할 대체 기능을 사용하여이 작업을 수행 할 수 있었다? 내 클래스의 사용했지만 IE의 내 회사 버전 getElementsByClassName을 지원하지 않습니다. 누구든지 그것을 할 수있는 더 좋은 방법을 알고 있습니까?

내 페이지가 그냥 그들이 태그의 다른 유형있어 방법에 대한 포인트를 만들기 위해

<body> 
    <h1>All about foxes</h1> 
    <font>I'm a fox</font> 
</body>

의 모양에 대한 예제. 이 예에서 사용자가 "여우"를 입력하면 h1 태그에 여우가 표시되고 글꼴 태그가 강조 표시됩니다. 분명히 h1 및 글꼴 태그를 모든 그룹의 구성원을 확보 할 수있는 그룹의 일부로 식별하는 데 사용해야합니다.

페이지에 표시되는 콘텐츠도 동적으로 결정되므로 Javascript를 사용하여 콘텐츠를 수정해야합니다.

편집 : 이전 코드 예제에 추가 된 내용입니다.

<body> 
    <h1>All about foxes</h1> 
    <font>I'm a fox</font> 
    <h3>I'm not a fox</h3> 
</body>

나는 그들이 강조 수 있도록 (모든 H1 년대와 글꼴의가 표시되어야 함을 말하는 게) 특히 H1 및 글꼴 태그를 표시하는 방법에 필요한 H3하지 않습니다 (물론 다른 인스턴스 페이지의 여우). 또한 내 환경 (외부 파일)에 외부 JS 파일을 포함시키는 것은 쉽지 않습니다. JQuery를 사용할 필요가 없다면 나는 그것을 선호한다.

출처

2013-07-26 avorum

'regex'를 사용하여 텍스트를 찾습니다. –

jquery에서 $ ('.class'). css() 메소드를 사용할 수 있습니다. –

이미 적절한 장소에서 class='highlight'을 가지고 있다면, 당신은 getElementsByClassName 기능적으로 동일 다음, 사용할 수 있습니다

elems = document.getElementsByTagName("*"); 
for (i=0; i<elems.length; i++) 
{ 
    if (elems[i].className == "highlight") 
    { elems[i].style.backgroundColor = "yellow"; } 
}

예 : http://jsfiddle.net/XU8Qz/

그냥 당신이 필요로 변경 어떤 스타일 수행을 배경색을 노란색으로 설정하는 대신에

출처

2013-07-26 18:17:36 KatieK

HTML 문서에서 텍스트를 동적으로 강조 표시하는 방법

답변

관련 문제