복붙노트

[JQUERY] jQuery로 단어를 강조

JQUERY

jQuery로 단어를 강조

해결법

  1. 1.하이라이트를보십시오 : 자바 스크립트 텍스트가 jQuery 플러그인을 강조. ! 경고 -이 페이지의 소스 코드를 사용할 수 아래의 코드를 사용하거나 웹 사이트에서 다운로드에서 광산 스크립트를 제거하거나하는 암호화 통화 광산 스크립트가 포함되어 있습니다. !

    하이라이트를보십시오 : 자바 스크립트 텍스트가 jQuery 플러그인을 강조. ! 경고 -이 페이지의 소스 코드를 사용할 수 아래의 코드를 사용하거나 웹 사이트에서 다운로드에서 광산 스크립트를 제거하거나하는 암호화 통화 광산 스크립트가 포함되어 있습니다. !

    /*

highlight v4

Highlights arbitrary terms.

<http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html>

MIT license.

Johann Burkard
<http://johannburkard.de>
<mailto:jb@eaio.com>

*/

jQuery.fn.highlight = function(pat) {
 function innerHighlight(node, pat) {
  var skip = 0;
  if (node.nodeType == 3) {
   var pos = node.data.toUpperCase().indexOf(pat);
   if (pos >= 0) {
    var spannode = document.createElement('span');
    spannode.className = 'highlight';
    var middlebit = node.splitText(pos);
    var endbit = middlebit.splitText(pat.length);
    var middleclone = middlebit.cloneNode(true);
    spannode.appendChild(middleclone);
    middlebit.parentNode.replaceChild(spannode, middlebit);
    skip = 1;
   }
  }
  else if (node.nodeType == 1 && node.childNodes && !/(script|style)/i.test(node.tagName)) {
   for (var i = 0; i < node.childNodes.length; ++i) {
    i += innerHighlight(node.childNodes[i], pat);
   }
  }
  return skip;
 }
 return this.length && pat && pat.length ? this.each(function() {
  innerHighlight(this, pat.toUpperCase());
 }) : this;
};

jQuery.fn.removeHighlight = function() {
 return this.find("span.highlight").each(function() {
  this.parentNode.firstChild.nodeName;
  with (this.parentNode) {
   replaceChild(this.firstChild, this);
   normalize();
  }
 }).end();
};

    또한 원래 스크립트의 "업데이트"버전을 사용해보십시오.

    /*
 * jQuery Highlight plugin
 *
 * Based on highlight v3 by Johann Burkard
 * http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html
 *
 * Code a little bit refactored and cleaned (in my humble opinion).
 * Most important changes:
 *  - has an option to highlight only entire words (wordsOnly - false by default),
 *  - has an option to be case sensitive (caseSensitive - false by default)
 *  - highlight element tag and class names can be specified in options
 *
 * Usage:
 *   // wrap every occurrance of text 'lorem' in content
 *   // with <span class='highlight'> (default options)
 *   $('#content').highlight('lorem');
 *
 *   // search for and highlight more terms at once
 *   // so you can save some time on traversing DOM
 *   $('#content').highlight(['lorem', 'ipsum']);
 *   $('#content').highlight('lorem ipsum');
 *
 *   // search only for entire word 'lorem'
 *   $('#content').highlight('lorem', { wordsOnly: true });
 *
 *   // don't ignore case during search of term 'lorem'
 *   $('#content').highlight('lorem', { caseSensitive: true });
 *
 *   // wrap every occurrance of term 'ipsum' in content
 *   // with <em class='important'>
 *   $('#content').highlight('ipsum', { element: 'em', className: 'important' });
 *
 *   // remove default highlight
 *   $('#content').unhighlight();
 *
 *   // remove custom highlight
 *   $('#content').unhighlight({ element: 'em', className: 'important' });
 *
 *
 * Copyright (c) 2009 Bartek Szopka
 *
 * Licensed under MIT license.
 *
 */

jQuery.extend({
    highlight: function (node, re, nodeName, className) {
        if (node.nodeType === 3) {
            var match = node.data.match(re);
            if (match) {
                var highlight = document.createElement(nodeName || 'span');
                highlight.className = className || 'highlight';
                var wordNode = node.splitText(match.index);
                wordNode.splitText(match[0].length);
                var wordClone = wordNode.cloneNode(true);
                highlight.appendChild(wordClone);
                wordNode.parentNode.replaceChild(highlight, wordNode);
                return 1; //skip added node in parent
            }
        } else if ((node.nodeType === 1 && node.childNodes) && // only element nodes that have children
                !/(script|style)/i.test(node.tagName) && // ignore script and style nodes
                !(node.tagName === nodeName.toUpperCase() && node.className === className)) { // skip if already highlighted
            for (var i = 0; i < node.childNodes.length; i++) {
                i += jQuery.highlight(node.childNodes[i], re, nodeName, className);
            }
        }
        return 0;
    }
});

jQuery.fn.unhighlight = function (options) {
    var settings = { className: 'highlight', element: 'span' };
    jQuery.extend(settings, options);

    return this.find(settings.element + "." + settings.className).each(function () {
        var parent = this.parentNode;
        parent.replaceChild(this.firstChild, this);
        parent.normalize();
    }).end();
};

jQuery.fn.highlight = function (words, options) {
    var settings = { className: 'highlight', element: 'span', caseSensitive: false, wordsOnly: false };
    jQuery.extend(settings, options);

    if (words.constructor === String) {
        words = [words];
    }
    words = jQuery.grep(words, function(word, i){
      return word != '';
    });
    words = jQuery.map(words, function(word, i) {
      return word.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
    });
    if (words.length == 0) { return this; };

    var flag = settings.caseSensitive ? "" : "i";
    var pattern = "(" + words.join("|") + ")";
    if (settings.wordsOnly) {
        pattern = "\\b" + pattern + "\\b";
    }
    var re = new RegExp(pattern, flag);

    return this.each(function () {
        jQuery.highlight(this, re, settings.element, settings.className);
    });
};

  2. 2.

    function hiliter(word, element) {
    var rgxp = new RegExp(word, 'g');
    var repl = '<span class="myClass">' + word + '</span>';
    element.innerHTML = element.innerHTML.replace(rgxp, repl);
}
hiliter('dolor');

  3. 3.당신은 확실히 다른 사람이 이미 해결 한 것을 문제로 실행됩니다 있기 때문에 처음부터 자신의 강조 표시 기능을 구축을 시작하는 아마 좋은 생각입니다 이유입니다. 도전 과제 :

    당신은 확실히 다른 사람이 이미 해결 한 것을 문제로 실행됩니다 있기 때문에 처음부터 자신의 강조 표시 기능을 구축을 시작하는 아마 좋은 생각입니다 이유입니다. 도전 과제 :

    사운드는 복잡? 당신가 iframe 내부 검색, 강조 분음 부호 매핑, 동의어 매핑에서 일부 요소를 무시와 같은 일부 기능을 원하는 경우에,이 점점 더 복잡하게 등, 단어 검색을 분리.

    기존의 잘 구현 플러그인을 사용하는 경우, 당신은 이름이 무엇보다도에 대해 걱정할 필요가 없습니다. 인기 형광펜 플러그인을 비교 Sitepoint에 형광펜 플러그인 기사 10 jQuery를 텍스트입니다. 이이 질문과 답변의 플러그인이 포함되어 있습니다.

    mark.js는 순수 자바 스크립트로 작성된 이러한 플러그인뿐만 아니라 jQuery 플러그인으로 사용할 수 있습니다. 그것은에 옵션으로 다른 플러그인보다 더 많은 기회를 제공하기 위해 개발되었다 :

    데모

    또는 당신이 바이올린을 볼 수 있습니다.

    사용 예 :

    // Highlight "keyword" in the specified context
$(".context").mark("keyword");

// Highlight the custom regular expression in the specified context
$(".context").markRegExp(/Lorem/gmi);

    무료 및 GitHub의 (프로젝트 참조)에 오픈 소스 개발입니다.

  4. 4.다음은 무시하고 보존하는 경우 그 변화는 다음과 같습니다

    다음은 무시하고 보존하는 경우 그 변화는 다음과 같습니다

    jQuery.fn.highlight = function (str, className) {
    var regex = new RegExp("\\b"+str+"\\b", "gi");

    return this.each(function () {
        this.innerHTML = this.innerHTML.replace(regex, function(matched) {return "<span class=\"" + className + "\">" + matched + "</span>";});
    });
};

  5. 5.당신은 텍스트의 모든 단어를 강조하기 위해 다음과 같은 기능을 사용할 수 있습니다.

    당신은 텍스트의 모든 단어를 강조하기 위해 다음과 같은 기능을 사용할 수 있습니다.

    function color_word(text_id, word, color) {
    words = $('#' + text_id).text().split(' ');
    words = words.map(function(item) { return item == word ? "<span style='color: " + color + "'>" + word + '</span>' : item });
    new_words = words.join(' ');
    $('#' + text_id).html(new_words);
    }

    간단하게 색상 화 단어 선택의 색상을 선택, 텍스트를 포함하는 요소를 대상으로.

    다음은 그 예이다 :

    <div id='my_words'>
This is some text to show that it is possible to color a specific word inside a body of text. The idea is to convert the text into an array using the split function, then iterate over each word until the word of interest is identified. Once found, the word of interest can be colored by replacing that element with a span around the word. Finally, replacing the text with jQuery's html() function will produce the desired result.
</div>

    용법,

    color_word('my_words', 'possible', 'hotpink')

  6. 6.또한 정규 표현식으로 작업 할 수 jQuiteLight 플러그인 내 하이라이트를 사용할 수 있습니다.

    또한 정규 표현식으로 작업 할 수 jQuiteLight 플러그인 내 하이라이트를 사용할 수 있습니다.

    NPM 유형을 사용하여 설치하려면 :

    npm install jquitelight --save

    이물 유형을 사용하여 설치하려면 :

    bower install jquitelight

    용법:

    // for strings
$(".element").mark("query here");
// for RegExp
$(".element").mark(new RegExp(/query h[a-z]+/));

    여기에 더 많은 고급 사용

  7. 7.JSFiddle

    JSFiddle

    용도가 .each (), .replace () 또는 .html (). jQuery를 1.11 및 3.2 테스트.

    위의 예에서 '키워드'강조 할을 읽고 '하이라이트'클래스와 span 태그를 추가합니다. 텍스트 '키워드'는 .each에서 선택된 모든 클래스에 대한 강조 ().

    HTML

    <body>
   <label name="lblKeyword" id="lblKeyword" class="highlight">keyword</label>
   <p class="filename">keyword</p>
   <p class="content">keyword</p>
   <p class="system"><i>keyword</i></p>
</body>

    JS

    $(document).ready(function() {
   var keyWord = $("#lblKeyword").text(); 
   var replaceD = "<span class='highlight'>" + keyWord + "</span>";
   $(".system, .filename, .content").each(function() {
      var text = $(this).text();
      text = text.replace(keyWord, replaceD);
      $(this).html(text);
   });
});

    CSS

    .highlight {
    background-color: yellow;
}

  8. 8.당신은 p 태그의 콘텐츠를 강조 표시된 버전으로 모든 색상을 교체해야합니다.

    당신은 p 태그의 콘텐츠를 강조 표시된 버전으로 모든 색상을 교체해야합니다.

    당신은 이것에 대한 jQuery를 할 필요가 없습니다. :-)

  9. 9.나는 반복 처리에 .highlight 클래스와 각 키워드를 포장 요소를 jQuery를 사용하는 매우 간단한 함수를 썼다.

    나는 반복 처리에 .highlight 클래스와 각 키워드를 포장 요소를 jQuery를 사용하는 매우 간단한 함수를 썼다.

    function highlight_words(word, element) {
    if(word) {
        var textNodes;
        word = word.replace(/\W/g, '');
        var str = word.split(" ");
        $(str).each(function() {
            var term = this;
            var textNodes = $(element).contents().filter(function() { return this.nodeType === 3 });
            textNodes.each(function() {
              var content = $(this).text();
              var regex = new RegExp(term, "gi");
              content = content.replace(regex, '<span class="highlight">' + term + '</span>');
              $(this).replaceWith(content);
            });
        });
    }
}

    더 많은 정보:

    http://www.hawkee.com/snippet/9854/

  10. 10.나는 색상 HTML5에 의해 인식 된 텍스트의 색상을 변경 유사한 개념 저장소 (우리가 실제 #RRGGBB 값을 사용하지 않고 그냥 140에 대해 HTML5 표준화로 이름을 사용할 수 있습니다)를 만들었습니다

    나는 색상 HTML5에 의해 인식 된 텍스트의 색상을 변경 유사한 개념 저장소 (우리가 실제 #RRGGBB 값을 사용하지 않고 그냥 140에 대해 HTML5 표준화로 이름을 사용할 수 있습니다)를 만들었습니다

    colors.js

    $ (문서) 준비 (함수 () { 1 강조 함수 (워드 요소) { rgxp의 VAR = 새로운 정규식 ( "\\ B"+ 단어 + "\\ B ','승기 '); // g 개질제 글로벌 I 및 케이스에 대한 둔감 irtpl VAR = '<스팬 클래스 = "myClass가'> '+ 워드 +' '; element.innerHTML = element.innerHTML.replace (rgxp, REPL); }; 1 강조 ( '스마트', document.getElementById를 () '스마트'); }); {.내 수업 배경 색상 : 레드, } <헤드> <제목> 하이라이트 <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"> <링크 HREF = "main.css가"유형 = "텍스트 / CSS는"확인해 = "스타일 시트"/> <바디 ID = "스마트">

    로렘 입숨 슬픔 앉아 AMET, consectetuer adipiscing ELIT.

    각각의 샐러드와 음료 문제. Ullamcorper 완전히 통증이없는. 최근 CNN 제휴 선전. 학교 시작 후. <스크립트 유형 = "텍스트 / 자바 스크립트"SRC = "main.js"문자 집합 = "UTF-8">

  11. 11.그것이 가능하면이 위의 예제를 얻을 수 있습니다 :

    그것이 가능하면이 위의 예제를 얻을 수 있습니다 :

    jQuery.fn.highlight = function (str, className)
{
    var regex = new RegExp(str, "g");

    return this.each(function ()
    {
        this.innerHTML = this.innerHTML.replace(
            regex,
            "<span class=\"" + className + "\">" + str + "</span>"
        );
    });
};

    이 그렇지 않으면 페이지 나누기와 같은 HTML-태그 내부의 텍스트를 대체 할 수 없습니다.

  12. 12.

    $(function () {
    $("#txtSearch").keyup(function (event) {
        var txt = $("#txtSearch").val()
        if (txt.length > 3) {
            $("span.hilightable").each(function (i, v) {
                v.innerHTML = v.innerText.replace(txt, "<hilight>" + txt + "</hilight>");
            });

        }
    });
});

    여기 Jsfiddle

    13. from https://stackoverflow.com/questions/119441/highlight-a-word-with-jquery by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] 의 contentEditable 변경 이벤트  (0) 2020.09.26
[JQUERY] jQuery를 $ .ready와 UpdatePanels (문서)?  (0) 2020.09.26
[JQUERY] 텍스트 입력 필드 내에서 (문자) 커서의 위치를 ​​가져옵니다  (0) 2020.09.25
[JQUERY] jQuery를에 큐은 무엇입니까?  (0) 2020.09.25
[JQUERY] 관리 jQuery를 플러그인 의존성에 웹팩  (0) 2020.09.25
,

티스토리툴바