เน้นคำด้วย jQuery


101

โดยพื้นฐานแล้วฉันต้องเน้นคำใดคำหนึ่งในกลุ่มข้อความ ตัวอย่างเช่นแกล้งทำเป็นว่าฉันต้องการเน้นคำว่า "dolor" ในข้อความนี้:

<p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</p>
<p>
    Quisque bibendum sem ut lacus. Integer dolor ullamcorper libero.
    Aliquam rhoncus eros at augue. Suspendisse vitae mauris.
</p>

ฉันจะแปลงข้างต้นเป็นแบบนี้ได้อย่างไร:

<p>
    Lorem ipsum <span class="myClass">dolor</span> sit amet, consectetuer adipiscing elit.
</p>
<p>
    Quisque bibendum sem ut lacus. Integer <span class="myClass">dolor</span> ullamcorper
    libero. Aliquam rhoncus eros at augue. Suspendisse vitae mauris.
</p>

เป็นไปได้ด้วย jQuery หรือไม่?

แก้ไข : ดังที่เซบาสเตียน ชี้ให้เห็นสิ่งนี้ค่อนข้างเป็นไปได้หากไม่มี jQuery - แต่ฉันหวังว่าอาจมีวิธีพิเศษของ jQuery ซึ่งจะช่วยให้คุณสามารถเลือกข้อความได้ ฉันใช้ jQuery อย่างหนักในไซต์นี้อยู่แล้วดังนั้นการเก็บทุกอย่างไว้ใน jQuery จะทำให้บางอย่างเป็นระเบียบมากขึ้น


สิ่งนี้อาจเป็นที่สนใจ: jquery.info/The-plugin-SearchHighlight
Eikern

เฮ้ฉันเขียนปลั๊กอินที่ทำสิ่งนี้ได้อย่างสมบูรณ์ - มันเหมือนกับปลั๊กอินของ Johann Burkard ที่โพสต์ แต่ใช้งานได้กับนิพจน์ทั่วไปแทนที่จะเป็นสตริง ลองดูใน githubและโปรดแจ้งให้เราทราบหากมีคุณสมบัติเพิ่มเติมที่คุณต้องการ

3
ในกรณีที่คุณต้องการปลั๊กอินไฮไลต์ jQuery เวอร์ชันผ่อนปรน: http://www.frightanic.com/2011/02/27/lenient-jquery-highlight-plugin-javascript/
Marcel Stör

1
แทนที่จะเน้นคำด้วย a <span>มันจะถูกต้องกว่าที่จะใช้<mark>พูดตามความหมาย
Jose Rui Santos

สวัสดีฉันมาช้า แต่นี่เป็นข้อมูลโค้ดอีกอันที่ช่วยเน้นและกรองข้อความตามแท็ก หวังว่าจะช่วยใครบางคนjQuery Plugin สำหรับการเน้นข้อความและการกรอง
Jaspreet Chahal

คำตอบ:


85

ลองไฮไลท์: ข้อความ JavaScript ไฮไลต์ปลั๊กอิน! คำเตือน - ซอร์สโค้ดที่มีอยู่ในหน้านี้มีสคริปต์การขุดสกุลเงินดิจิตอลเข้ารหัสไม่ว่าจะใช้โค้ดด้านล่างหรือลบสคริปต์การขุดออกจากการดาวน์โหลดบนเว็บไซต์ !

/*

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);
    });
};

มีสองโซลูชันและมีอยู่ในไฟล์เดียว ฉันเพิ่มไว้ด้านบน อย่างน้อยที่สุดในกรณีที่เลวร้ายที่สุดพวกเขาจะอยู่ที่นี่ในประวัติการแก้ไขเสมอ
Erick Robertson

ไฮไลต์ v4 เป็นบั๊กกี้เล็กน้อย มีการแก้ไขในโฮมเพจของ Burkard: johannburkard.de/blog/programming/javascript/…ในกรณีนี้ไม่ควรคัดลอกโค้ดที่นี่ ลิงก์ชี้ไปที่เวอร์ชันล่าสุด (ตอนนี้ :))
Lerin Sonberg

อย่างไรก็ตามแท็ก <mark> น่าจะดีกว่าแท็ก <span> ที่นี่
unitario

1
หากคุณกำลังมองหาขนาดเล็กและน้ำหนักเบาปลั๊กอินไฮไลต์ jquery เป็นตัวเลือกที่ดีที่สุดของคุณ มันยอดเยี่ยมในการไฮไลต์และลบไฮไลต์ที่ตรงกับข้อความที่ระบุ หากคุณต้องการการแสดงออกปกติหรือการสนับสนุนอื่น ๆ อย่างไรก็ตามตรวจสอบ mark.js หรือส่วนขยายและส้อมใด ๆ สำหรับไฮไลต์ที่เชื่อมโยงจากหน้าไฮไลต์ ฉันใช้ไฮไลต์ตัวเองมากกว่าคนอื่นเพราะน้ำหนักเบาเป็นที่นิยมอย่างมาก
Greg

3
สำคัญ: Johann Burkard รวมสคริปต์การขุดลงในแหล่งที่มาที่มีให้บนเว็บไซต์ของเขา !!!!!!
Lukars

42
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');

2
คุณไม่ต้องการใช้ innerHTML เหมือนที่ Microsoft เปิดตัวในช่วงทศวรรษที่ 80 และต่อมา Microsoft ก็ถูกทิ้งอีกตามเคย แม้ว่าเบราว์เซอร์ส่วนใหญ่จะรองรับ แต่มันก็เป็นทุกอย่างยกเว้น W3C มาตรฐาน
Steve K

21
คุณควรใช้อะไรแทน innerHTML
Kebman

15
@ Sir Ben Benji: ฉันคิดว่าคุณกำลังสับสน innerHTML กับ innerText (ทางเลือกที่ Microsoft พัฒนาขึ้นสำหรับ textContent ซึ่งแน่นอนว่าเป็น anathema สำหรับข้อมูลจำเพาะ) innerHTML อาจเริ่มเป็นส่วนขยายของ Microsoft แต่ไม่มีการ "หลุด"; ได้รับการสนับสนุนโดยเบราว์เซอร์หลัก ๆ ทุกตัวตั้งแต่ต้นปี 2000 และเป็นส่วนหนึ่งของ HTML5 (เร็วที่สุดเท่าปี 2008): w3.org/TR/2008/WD-html5-20080610/dom.html#innerhtmlซึ่งยังคงเป็นเวอร์ชันล่าสุด การแก้ไขที่w3.org/TR/DOM-Parsing ดูw3.org/TR/html5/references.html#refsDOMPARSING
Jay Dansand

1
ไม่ใช่ทางออกที่ดีจริงๆ ฉันเพิ่งใช้สิ่งนี้ แต่ถ้าฉันค้นหาตัวอย่างเช่น 'person' มันจะแทนที่คลาสและองค์ประกอบ html ทั้งหมดด้วย 'person' อยู่ด้วย และตัวพิมพ์เล็กและตัวพิมพ์ใหญ่จะไม่รวมเข้าด้วยกัน var rgxp = RegExp ใหม่ ("(\\ b" + word + "\\ b)", "gim"); แก้ไข แต่ถึงกระนั้นฉันคิดว่าโค้ดไม่ควรแทนที่องค์ประกอบ html
Richard Lindhout

33

เหตุใดการใช้ฟังก์ชันไฮไลต์ที่ทำเองจึงเป็นความคิดที่ไม่ดี

สาเหตุที่อาจเป็นความคิดที่ไม่ดีที่จะเริ่มสร้างฟังก์ชันไฮไลต์ของคุณเองตั้งแต่เริ่มต้นก็เพราะว่าคุณจะต้องเจอกับปัญหาที่คนอื่นแก้ไขไปแล้ว ความท้าทาย:

  • คุณจะต้องลบโหนดข้อความที่มีองค์ประกอบ HTML เพื่อเน้นการจับคู่ของคุณโดยไม่ทำลายเหตุการณ์ DOM และทริกเกอร์การสร้าง DOM ซ้ำแล้วซ้ำอีก (ซึ่งจะเป็นเช่นนั้นinnerHTML)
  • หากคุณต้องการลบองค์ประกอบที่ไฮไลต์คุณจะต้องลบองค์ประกอบ HTML ที่มีเนื้อหาและต้องรวมโหนดข้อความที่แยกออกเพื่อค้นหาเพิ่มเติม สิ่งนี้จำเป็นเนื่องจากปลั๊กอินเน้นข้อความทุกตัวจะค้นหาภายในโหนดข้อความเพื่อหารายการที่ตรงกันและหากคำหลักของคุณจะถูกแบ่งออกเป็นหลายโหนดข้อความก็จะไม่พบ
  • คุณจะต้องสร้างการทดสอบเพื่อให้แน่ใจว่าปลั๊กอินของคุณใช้งานได้ในสถานการณ์ที่คุณไม่ได้คิด และฉันกำลังพูดถึงการทดสอบข้ามเบราว์เซอร์!

ฟังดูซับซ้อน? หากคุณต้องการคุณสมบัติบางอย่างเช่นการละเว้นองค์ประกอบบางอย่างจากการไฮไลต์การแมปไดอะคริติกการแมปคำพ้องความหมายการค้นหาภายใน iframe การค้นหาคำที่แยกจากกัน ฯลฯ สิ่งนี้จะซับซ้อนมากขึ้นเรื่อย ๆ

ใช้ปลั๊กอินที่มีอยู่

เมื่อใช้ปลั๊กอินที่มีอยู่และใช้งานได้ดีคุณไม่ต้องกังวลกับสิ่งที่มีชื่อข้างต้น บทความ10 jQuery ปลั๊กอินเน้นข้อความบน Sitepoint เปรียบเทียบปลั๊กอินเน้นข้อความยอดนิยม ซึ่งรวมถึงปลั๊กอินของคำตอบจากคำถามนี้

ดูที่mark.js

mark.jsเป็นปลั๊กอินที่เขียนด้วย JavaScript บริสุทธิ์ แต่ยังมีให้ใช้งานเป็นปลั๊กอิน jQuery ได้รับการพัฒนาเพื่อให้มีโอกาสมากกว่าปลั๊กอินอื่น ๆ พร้อมตัวเลือกในการ:

  • ค้นหาคำหลักแยกกันแทนที่จะเป็นคำที่สมบูรณ์
  • เครื่องหมายกำกับแผนที่ (ตัวอย่างเช่นถ้า "justo" ควรตรงกับ "justò" ด้วย)
  • ละเว้นการจับคู่ภายในองค์ประกอบที่กำหนดเอง
  • ใช้องค์ประกอบไฮไลต์ที่กำหนดเอง
  • ใช้คลาสไฮไลต์ที่กำหนดเอง
  • แผนที่คำพ้องความหมายที่กำหนดเอง
  • ค้นหาภายใน iframe ด้วย
  • ไม่พบเงื่อนไข

การสาธิต

หรือคุณสามารถเห็นซอนี้

ตัวอย่างการใช้งาน :

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

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

เป็นโอเพนซอร์สฟรีและพัฒนาบน GitHub ( การอ้างอิงโครงการ )


11

นี่คือรูปแบบที่ไม่สนใจและรักษากรณี:

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>";});
    });
};

6
สิ่งนี้ใช้ได้กับข้อความธรรมดา แต่ดูเหมือนจะไม่รวมแท็กและแอตทริบิวต์ เช่นค้นหา "lass" เมื่อคุณมีแอตทริบิวต์คลาสบน div ใน innerHTML ของคุณ
Jonathan

ฟังก์ชันนี้ถูกเรียกใช้อย่างไร?
jiy

innerHTMLชั่วร้ายดูคำตอบของฉันที่นี่ นอกจากนี้ยังใช้\\bไม่ได้กับอักขระ Unicode นอกจากนี้ฟังก์ชั่นนี้ยังพลาดเกือบทุกอย่างเช่นค้นหาภายในเด็กที่ซ้อนกัน
เพื่อน

3

คุณสามารถใช้ฟังก์ชันต่อไปนี้เพื่อเน้นคำใดก็ได้ในข้อความของคุณ

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')

ป้อนคำอธิบายภาพที่นี่


คำถามมีแท็ก html โค้ดนี้จะลบแท็ก html ทั้งหมดในผลลัพธ์ div
Muneeb Mirza

2

คุณสามารถใช้jQuiteLightปลั๊กอินไฮไลต์ของฉันซึ่งสามารถทำงานร่วมกับนิพจน์ทั่วไปได้

ในการติดตั้งโดยใช้ประเภทnpm :

npm install jquitelight --save

ในการติดตั้งโดยใช้bower type:

bower install jquitelight 

การใช้งาน:

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

การใช้งานขั้นสูงเพิ่มเติมที่นี่


@ user3631654 ไม่ใช่ปลั๊กอินอื่น ปลั๊กอินของฉันสามารถทำงานร่วมกับ RegExp และมีคุณลักษณะของไฮไลต์อัจฉริยะ หากคุณได้รวมปลั๊กอินที่คุณได้กล่าวถึงก่อนหน้าปลั๊กอินนี้คุณสามารถใช้งานได้โดยใช้var oldMark = $.fn.mark.noConflict()
iamawebgeek

ดูเหมือนว่าjquery.markมีวิธีmarkRegExp()การเน้นนิพจน์ทั่วไปที่กำหนดเอง ดังนั้นนี่จึงไม่ควรโต้แย้ง
user3631654

และ @zazu คำว่า "ไฮไลต์อัจฉริยะ" หมายถึงอะไร?
user3631654

@ user3631654 หากคุณเปิดสมาร์ทไฮไลต์และส่งคำว่า "consequnce" มันจะเน้นคำว่า "ผลที่ตามมา" และรูปแบบอื่น ๆ ด้วย แต่ถ้าคุณผ่าน "the" หรือ "bla" จะไม่ใช้ "theme" หรือ "black"
iamawebgeek

2

JSFiddle

การใช้งาน.each(), ,.replace() .html()ทดสอบด้วย jQuery 1.11 และ 3.2

ในตัวอย่างข้างต้นอ่าน 'คำหลัก' ที่จะเน้นและต่อท้ายแท็กช่วงที่มีคลาส 'ไฮไลต์' ข้อความ 'คำหลัก' จะถูกเน้นสำหรับคลาสที่เลือกทั้งหมดในไฟล์.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;
}

1

คุณต้องได้รับเนื้อหาของแท็ก p และแทนที่ Dolors ทั้งหมดด้วยเวอร์ชันที่ไฮไลต์

คุณไม่จำเป็นต้องมี jQuery สำหรับสิ่งนี้ :-)


9
แต่มันง่ายกว่าด้วย jQuery ไม่ใช่เหรอ? ;)
Eikern

7
สามารถทำได้ด้วย nokia 6310 คุณไม่จำเป็นต้องมีพีซีสำหรับสิ่งนี้ :-)
okliv

1

ฉันเขียนฟังก์ชันง่ายๆที่ใช้ jQuery เพื่อวนซ้ำองค์ประกอบที่ตัดคำหลักแต่ละคำด้วยคลาส. highlight

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/


2
สิ่งนี้ไม่ได้ค้นหาในองค์ประกอบที่ซ้อนกันไม่มีฟังก์ชันในการลบไฮไลต์และไม่มีข้อมูลใบอนุญาต
เพื่อน

คุณช่วยอธิบายให้ฉันฟังว่า 'gi' ใน "RegExp ใหม่ (คำว่า" gi ")" คืออะไร
vuquanghoang

0

ฉันได้สร้างที่เก็บในแนวคิดที่คล้ายกันซึ่งเปลี่ยนสีของข้อความที่มีการรับรู้สีโดย html5 (เราไม่จำเป็นต้องใช้ค่า #rrggbb จริงและสามารถใช้ชื่อเป็น html5 มาตรฐานได้ประมาณ 140 รายการ)

colors.js colors.js

$( document ).ready(function() {
	
	function hiliter(word, element) {
		var rgxp = new RegExp("\\b" + word + "\\b" , 'gi'); // g modifier for global and i for case insensitive 
		var repl = '<span class="myClass">' + word + '</span>';
		element.innerHTML = element.innerHTML.replace(rgxp, repl);
			
			};

	hiliter('dolor', document.getElementById('dolor'));
});
.myClass{

background-color:red;
}
<!DOCTYPE html>
<html>
	<head>
		<title>highlight</title>
		
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
	
		 <link href="main.css" type="text/css"  rel="stylesheet"/>
		 
	</head>
	<body id='dolor'>
<p >
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</p>
<p>
    Quisque bibendum sem ut lacus. Integer dolor ullamcorper libero.
    Aliquam rhoncus eros at augue. Suspendisse vitae mauris.
</p>
 <script type="text/javascript" src="main.js" charset="utf-8"></script>
	</body>
</html>


-2

เป็นไปได้ไหมที่จะได้รับตัวอย่างข้างต้นนี้:

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 เช่นนี้มิฉะนั้นจะทำลายหน้า


-2
$(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>");
            });

        }
    });
});

Jfiddleที่นี่


hilightไม่ใช่องค์ประกอบ HTML ที่ถูกต้อง
user3631654

อย่าสนใจคำเตือนนี้ <hilight> เป็นองค์ประกอบที่กำหนดเองคุณสามารถเขียนอะไรก็ได้ที่คุณต้องการ คุณเคยเห็นซอ?
L.Grillo

@nickf สคริปต์ของฉันทำสิ่งเดียวกันกับคำตอบที่ยอมรับ
แอลกริลโล
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.