JQuery সহ একটি শব্দ হাইলাইট করুন


102

আমি মূলত পাঠ্যের একটি ব্লকে একটি নির্দিষ্ট শব্দটি হাইলাইট করা দরকার। উদাহরণস্বরূপ, ভান করুন আমি এই লেখায় "ডোলর" শব্দটি হাইলাইট করতে চেয়েছিলাম:

<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/Theplugin-
আইকর্ন

আরে, আমি একটি প্লাগইন লিখেছিলাম যা এটি ঠিকভাবে করে - এটি জোহান বুকার্ড প্লাগইন ম্যালারসেনের মতো, তবে স্ট্রিংয়ের পরিবর্তে নিয়মিত প্রকাশের সাথে কাজ করে। গিথুব এ এটি পরীক্ষা করে দেখুন এবং আপনার প্রয়োজনীয় অতিরিক্ত বৈশিষ্ট্য আছে কিনা তা দয়া করে আমাকে জানান।

4
আপনার যদি jQuery হাইলাইট প্লাগইনের একটি লেনিয়েন্ট সংস্করণ প্রয়োজন: http://www.frightanic.com/2011/02/27/lenient-jquery-hightlight-plugin-javascript/
মার্সেল স্টার

4
ক এর সাথে শব্দের হাইলাইট করার পরিবর্তে শব্দার্থভাবে বলতে গেলে <span>এটি ব্যবহার করা আরও সঠিক <mark>
জোসে রুই সান্টোস

হাই আমি দেরীতে আছি তবে এখানে আরও একটি কোড স্নিপেট রয়েছে যা ট্যাগগুলির উপর ভিত্তি করে পাঠ্যকে হাইলাইট এবং ফিল্টার করতে সহায়তা করে। আশা করি এটি কারও পাঠ্য হাইলাইট এবং ফিল্টারিংয়ের জন্য jQuery প্লাগইনকে
জাসপ্রীত চাহাল

উত্তর:


85

হাইলাইট করার চেষ্টা করুন : জাভাস্ক্রিপ্ট টেক্সট হাইলাইট করে 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);
    });
};

দুটি সমাধান রয়েছে এবং সেগুলি প্রতিটি ফাইলে রয়েছে। আমি তাদের উপরে যুক্ত করেছি। কমপক্ষে, সবচেয়ে খারাপ পরিস্থিতি হিসাবে, এগুলি সম্পাদনার ইতিহাসে সর্বদা এখানে উপলব্ধ থাকবে।
এরিক রবার্টসন

হাইলাইট ভি 4 কিছুটা বগি। বার্কার্ডের হোম পেজে একটি স্থিরতা রয়েছে : johannburkard.de/blog/programming/javascript/… এই ক্ষেত্রে কোডটি এখানে অনুলিপি করা ভাল ধারণা ছিল না; লিঙ্কটি সর্বশেষ সংস্করণে (এখন :)) নির্দেশ করে।
লেরিন সোনবার্গ 24'15

উপায় দ্বারা <চিহ্ন> -টি ট্যাগটি সম্ভবত <span> ট্যাগের চেয়ে ভাল।
ইউনিটরিও

4
আপনি যদি ছোট এবং লাইটওয়েটের সন্ধান করেন তবে হাইলাইট jquery প্লাগইনটি আপনার সেরা পছন্দ। এটি হাইলাইট-ইন করা এবং প্রদত্ত পাঠ্যের সাথে হাইলাইটগুলি মুছে ফেলতে দুর্দান্ত। আপনার যদি নিয়মিত প্রকাশ বা অন্য সমর্থন প্রয়োজন হয়; তবে, হাইলাইট পৃষ্ঠা থেকে লিঙ্কযুক্ত সংযোগের জন্য চিহ্ন.জেএস বা কোনও এক্সটেনশন এবং কাঁটাচামড়া পরীক্ষা করে দেখুন। আমি নিজেকে অন্যের তুলনায় হাইলাইট ব্যবহার করি কারণ হালকা ওজনের খুব প্রশংসা হয়।
গ্রেগ

4
গুরুত্বপূর্ণ: জোহান বুকার্ড তার ওয়েবসাইটটিতে সরবরাহিত উত্সটিতে একটি খনির স্ক্রিপ্ট অন্তর্ভুক্ত করেছে !!!!!!
লুকার্স

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

4
80 এর দশকে মাইক্রোসফ্ট যেভাবে প্রবর্তন করেছিল এবং পরে যথারীতি মাইক্রোসফ্ট দ্বারা আবার নামিয়ে দেওয়া হয়েছিল আপনি অভ্যন্তরীণ এইচটিএমএল ব্যবহার করতে চান না। যদিও বেশিরভাগ ব্রাউজার এটি সমর্থন করে তবে ডাব্লু 3 সি স্ট্যান্ডার্ড ছাড়া এটি সবই।
স্টিভ কে

21
অভ্যন্তর HTML এর পরিবর্তে আপনার কী ব্যবহার করা উচিত?
কেবম্যান 3'13

15
@ স্যার বেন বেনজি: আমি মনে করি আপনি ইনার টেক্সট (মাইক্রোসফ্ট-বিকাশযুক্ত টেক্সট কনটেন্টের বিকল্প, যা প্রকৃত পক্ষে বিশ্লেষণের পক্ষে) এর সাথে অভ্যন্তরীণ এইচটিএমএলকে বিভ্রান্ত করছেন। ইনারএইচটিএমএল মাইক্রোসফ্ট এক্সটেনশান হিসাবে শুরু হতে পারে তবে কোনওভাবেই "বাদ পড়ে"; এটি 2000 এর দশকের প্রথম দিক থেকে প্রতিটি বড় ব্রাউজার দ্বারা সমর্থিত, এবং এইচটিএমএল 5 এর অংশ (২০০৮ সালের প্রথম দিকে): w3.org/TR/2008/WD-html5-20080610/dom.html#innerhtml এটি সর্বশেষতমটিতে উপস্থিত রয়েছে w3.org/TR/DOM- পার্সিংসংশোধন । আরও দেখুন w3.org/TR/html5/references.html#refsDOMPARSING
জয় দানসান্দ

4
আসলেই ভাল সমাধান নয়। আমি কেবল এটি ব্যবহার করেছি তবে যদি আমি উদাহরণ হিসাবে 'ব্যক্তি' অনুসন্ধান করি তবে এটি সমস্ত শ্রেণি এবং এইচটিএমএল উপাদানগুলিকে এতে 'ব্যক্তি' দিয়ে প্রতিস্থাপন করে। এবং ছোট এবং বড় হাতের অক্ষরও একীভূত হয় না। var rgxp = নতুন RegExp ("(\\ বি" + শব্দ + "\\ বি)", "গিম"); স্থির করে তবে তবুও, আমি মনে করি কোডটি এইচটিএমএল উপাদানগুলি প্রতিস্থাপন করা উচিত নয়।
রিচার্ড লিন্ডাউট

35

কেন একটি স্ব-তৈরি হাইলাইটিং ফাংশন ব্যবহার করা একটি খারাপ ধারণা

আপনার নিজের হাইলাইটিং ফাংশনটি স্ক্র্যাচ থেকে শুরু করা সম্ভবত এটির পক্ষে খারাপ ধারণা হবার কারণ হ'ল আপনি অন্যদের ইতিমধ্যে সমাধান করা সমস্যাগুলিতে অবশ্যই চলে যাবেন। চ্যালেঞ্জগুলি:

  • আপনার ম্যাচগুলিকে DOM ইভেন্টগুলি বিনষ্ট না করে এবং DOM পুনঃজন্মকে বারবার ট্রিগার না করে আপনার HTML উপাদানগুলির সাথে পাঠ্য নোডগুলি সরিয়ে ফেলতে হবে (উদাহরণস্বরূপ এটি হবে innerHTML)
  • আপনি যদি হাইলাইট হওয়া উপাদানগুলি মুছতে চান তবে আপনাকে এইচটিএমএল উপাদানগুলি তাদের সামগ্রীর সাথে মুছে ফেলতে হবে এবং আরও অনুসন্ধানের জন্য বিভক্ত পাঠ্য নোডগুলিও একত্র করতে হবে। এটি প্রয়োজনীয় কারণ প্রতিটি হাইলাইটার প্লাগইন ম্যাচের জন্য পাঠ্য নোডের ভিতরে অনুসন্ধান করে এবং যদি আপনার কীওয়ার্ডগুলি কয়েকটি পাঠ্য নোডে বিভক্ত হয়ে থাকে তবে সেগুলি পাওয়া যাবে না।
  • আপনার প্লাগইন এমন পরিস্থিতিতে কাজ করে যা আপনি ভাবেননি তা নিশ্চিত করার জন্যও আপনাকে পরীক্ষা তৈরি করতে হবে। এবং আমি ক্রস ব্রাউজার পরীক্ষা সম্পর্কে কথা বলছি!

জটিল মনে হচ্ছে? আপনি যদি কিছু বৈশিষ্ট্যগুলি চান যেমন হাইলাইট করা থেকে কিছু উপাদানকে উপেক্ষা, ডায়াক্রিটিক্স ম্যাপিং, প্রতিশব্দ ম্যাপিং, আইফ্রেমে ভিতরে অনুসন্ধান করা, পৃথক শব্দের অনুসন্ধান ইত্যাদি ইত্যাদি আরও জটিল হয়ে ওঠে।

একটি বিদ্যমান প্লাগইন ব্যবহার করুন

একটি বিদ্যমান, ভাল বাস্তবায়িত প্লাগইন ব্যবহার করার সময়, আপনাকে উপরে বর্ণিত জিনিসগুলি নিয়ে চিন্তা করতে হবে না। নিবন্ধটি 10 jQuery এর টেক্সট হাইলাইটার প্লাগিন SitePoint জনপ্রিয় হাইলাইটার প্লাগিন তুলনা করা হয়। এটি এই প্রশ্ন থেকে উত্তর প্লাগইন অন্তর্ভুক্ত।

চিহ্ন.জেএস এ দেখুন

চিহ্ন.জেএস হ'ল এমন একটি প্লাগইন যা খাঁটি জাভাস্ক্রিপ্টে লিখিত হয় তবে এটি jQuery প্লাগইন হিসাবে উপলব্ধ। অপশনগুলির সাথে অন্যান্য প্লাগিনগুলির চেয়ে বেশি সুযোগ দেওয়ার জন্য এটি তৈরি করা হয়েছিল:

  • সম্পূর্ণ শব্দটির পরিবর্তে আলাদাভাবে কীওয়ার্ড অনুসন্ধান করুন
  • মানচিত্র ডায়াক্রিটিক্স (উদাহরণস্বরূপ যদি "জাস্টো" এছাড়াও "জাস্টো" এর সাথে মেলে)
  • কাস্টম উপাদানগুলির মধ্যে ম্যাচগুলি উপেক্ষা করুন
  • কাস্টম হাইলাইটিং উপাদান ব্যবহার করুন
  • কাস্টম হাইলাইটিং ক্লাস ব্যবহার করুন
  • মানচিত্র কাস্টম প্রতিশব্দ
  • iframes ভিতরেও অনুসন্ধান করুন
  • পদ পাওয়া যায় নি

ডেমো

বিকল্পভাবে আপনি এই ঝাঁকুনি দেখতে পারেন ।

ব্যবহারের উদাহরণ :

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

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

এটি গিটহাবের ( প্রকল্পের রেফারেন্স ) মুক্ত এবং বিকাশযুক্ত মুক্ত উত্স ।


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
এটি সরল পাঠ্যের জন্য কাজ করে তবে এটি ট্যাগ এবং বৈশিষ্ট্যগুলি বাদ দেয় বলে মনে হয় না। অর্থ্যাৎ আপনার অভ্যন্তরীণ এইচটিএমএলে একটি ডিভিতে কোনও শ্রেণীর বৈশিষ্ট্য রয়েছে যখন "লাস" অনুসন্ধান করুন।
জোনাথন

এই ফাংশনটি কীভাবে চাওয়া হয়েছে?
জিই

innerHTMLখারাপ, আমার উত্তর এখানে দেখুন। এছাড়াও, \\bইউনিকোড অক্ষরের জন্য কাজ করে না। তবুও এই ফাংশনটি প্রায় কোনও কিছুই মিস করে না, যেমন নেস্টেড বাচ্চাদের ভিতরে অনুসন্ধান করা।
শহরবাসী

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

বর্ণটিকে রঙিন করতে এবং পছন্দসই রঙটি চয়ন করে কেবল সেই উপাদানটিকে লক্ষ্য করুন text

এখানে একটি উদাহরণ :

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

এখানে চিত্র বর্ণনা লিখুন


প্রশ্নটিতে এইচটিএমএল ট্যাগ রয়েছে, এই কোডটি ফলক ডিভের ফলে সমস্ত এইচটিএমএল ট্যাগ সরিয়ে ফেলবে।
মুনিব মীর্জা

2

আপনি আমার হাইলাইট প্লাগইন jQuiteLight ব্যবহার করতে পারেন , এটি নিয়মিত প্রকাশের সাথেও কাজ করতে পারে।

এনপিএম ব্যবহার করে ইনস্টল করতে :

npm install jquitelight --save

বোরো টাইপ ব্যবহার করে ইনস্টল করতে :

bower install jquitelight 

ব্যবহার:

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

আরো উন্নত ব্যবহার এখানে


@ ব্যবহারকারী3631654 না এটি একটি পৃথক প্লাগইন। আমার প্লাগইনটি RegExp এর সাথে কাজ করতে পারে এবং এতে স্মার্ট হাইলাইটের বৈশিষ্ট্য রয়েছে। আপনি যদি এই প্লাগইনটির আগে উল্লিখিত প্লাগইনটি অন্তর্ভুক্ত করে থাকেন তবে আপনি এটি ব্যবহার করতে পারেনvar oldMark = $.fn.mark.noConflict()
iamawebgeek ২

Jquery.mark এর মত মনে হচ্ছে markRegExp()কাস্টম নিয়মিত প্রকাশগুলি হাইলাইট করার জন্য একটি পদ্ধতি রয়েছে । সুতরাং এটি একটি যুক্তি হওয়া উচিত নয়।
user3631654

এবং @ জাজু, "স্মার্ট হাইলাইট" এর অর্থ কী?
user3631654

@ user3631654 আপনি যদি স্মার্ট হাইলাইট চালু করেন এবং কোনও শব্দ "ফলস্বরূপ" পাস করেন এটি শব্দ "পরিণতি" এবং এর অন্যান্য রূপগুলিও হাইলাইট করবে তবে আপনি যদি "" "বা" ব্লে "পাস করেন তবে এটি" থিম "বা" কালো "নেবে না
iamawebgeek

2

জেএসফিডাল

ব্যবহার .each(), .replace(), .html()। JQuery 1.11 এবং 3.2 দিয়ে পরীক্ষিত।

উপরের উদাহরণে, হাইলাইট করার জন্য 'কীওয়ার্ড' পড়ে এবং 'হাইলাইট' শ্রেণীর সাথে স্প্যান ট্যাগ যুক্ত হয়। 'কীওয়ার্ড' পাঠ্যটি সকল নির্বাচিত শ্রেণীর জন্য হাইলাইট করা হয়েছে .each()

এইচটিএমএল

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

জেএস

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

সিএসএস

.highlight {
    background-color: yellow;
}

1

আপনাকে পি ট্যাগটির সামগ্রী পেতে এবং এতে থাকা সমস্ত ডলারের হাইলাইটেড সংস্করণ দিয়ে প্রতিস্থাপন করতে হবে।

এই জন্য আপনার jQuery করার প্রয়োজন নেই। :-)


9
তবে এটি jQuery দিয়ে সহজ, তাই না? ;)
আইকর্ন

7
এটি
নোকিয়া

1

আমি একটি খুব সাধারণ ফাংশন লিখেছি যা প্রতিটি কিওয়ার্ডকে একটি উচ্চতা শ্রেণীর সাথে মোড়ানো উপাদানগুলির পুনরাবৃত্তি করতে 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/


4
এটি নেস্টেড উপাদানগুলিতে অনুসন্ধান করে না, হাইলাইটগুলি সরানোর কোনও কার্যকারিতা নেই এবং লাইসেন্স সম্পর্কিত কোনও তথ্য নেই।
শহরবাসী

"নতুন রেজিপ্যাক্স (শব্দ," জিআই ")" -তে 'জিআই' কী তা আমাকে বোঝাতে আপনার আপত্তি আছে?
ভুকানঘোয়াং

-1

আমি অনুরূপ ধারণার উপরে একটি সংগ্রহশালা তৈরি করেছি যা পাঠ্যগুলির রঙগুলিকে পরিবর্তন করে যার রঙগুলি এইচটিএমএল 5 দ্বারা স্বীকৃত হয়েছে (আমাদের প্রকৃত #rrggbb মান ব্যবহার করতে হবে না এবং কেবলমাত্র এইচটিএমএল 5 হিসাবে নামগুলি প্রায় 140 টি মানক হিসাবে ব্যবহার করতে পারব)

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

এইচটিএমএল-ট্যাগের মতো পাঠ্য প্রতিস্থাপন করা নয়, অন্যথায় এটি পৃষ্ঠাটি ভেঙে দেয়।


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

        }
    });
});

জিফিল এখানে


hilightকোনও বৈধ এইচটিএমএল উপাদান নয়
ব্যবহারকারী 3631654

কেবল এই সতর্কতাটিকে উপেক্ষা করুন, <হাইলাইট> আপনার কাস্টম উপাদান, আপনি যা চান লিখতে পারেন। আপনি ঝাঁকুনি দেখেছেন?
এল গ্রিলো

@ নিকফ আমার স্ক্রিপ্ট গ্রহণযোগ্য উত্তরের ঠিক একই কাজটি করেন
এল.গ্রিলো ২
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.