it-swarm-eu.dev

Zvýrazněte slovo pomocí jQuery

V podstatě potřebuji zvýraznit určité slovo v bloku textu. Například, předstírat, že jsem chtěl v tomto textu zvýraznit slovo „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>

Jak převedu výše uvedené na něco takového:

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

Je to možné s jQuery?

Edit: Jak Sebastianpoukázal , to je docela možné bez jQuery - ale doufal jsem, že může existovat speciální metoda jQuery, která by vám umožnila voliče na samotném textu. JQuery už na těchto stránkách používám, takže všechno zabalené v jQuery by dělalo věci možná o něco více uklizené.

89
nickf

Vyzkoušejte highlight: JavaScript zvýrazňující jQuery plugin . ! Upozornění - zdrojový kód, který je k dispozici na této stránce, obsahuje skript pro kryptografickou měnu, buď použijte níže uvedený kód, nebo odeberte skript pro těžbu ze staženého webu. !

/*

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:[email protected]>

*/

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

Vyzkoušejte také "aktualizovanou" verzi původního skriptu .

/*
 * 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);
    });
};
77
mlarsen
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');
41
Andrew Hedges

Proč používat funkci samostavby je špatný nápad

Důvodem, proč je pravděpodobně špatný nápad začít budovat vlastní zvýrazňující funkci, je to, že se určitě dostanete do problémů, které již ostatní vyřešili. Výzvy:

  • Budete muset odstranit textové uzly s prvky HTML, abyste zvýraznili své zápasy, aniž byste zničili události DOM a znovu a znovu spouštěli DOM (což by bylo například v případě innerHTML)
  • Pokud chcete odstranit zvýrazněné prvky, museli byste odstranit prvky HTML s jejich obsahem a také kombinovat rozdělené textové uzly pro další vyhledávání. To je nutné, protože každý zvýrazňovač plugin hledá uvnitř textových uzlů pro shody a pokud vaše klíčová slova budou rozdělena do několika textových uzlů, nebudou nalezeny.
  • Budete také muset vytvořit testy, abyste se ujistili, že váš plugin funguje v situacích, o kterých jste nepřemýšleli. A já mluvím o cross-browser testech!

Zní to složitě? Pokud chcete některé funkce, jako je ignorování některých prvků z zvýraznění, mapování diakritiky, mapování synonym, hledání uvnitř iframes, oddělené vyhledávání Word, atd., To se stává stále složitější.

Použijte existující plugin

Když používáte existující, dobře implementovaný plugin, nemusíte se starat o výše uvedené věci. Článek 10 jQuery text zvýrazňovače pluginy na Sitepoint srovnává populární zvýrazňovače pluginy. To zahrnuje pluginy odpovědí z této otázky.

Podívejte se na mark.js

mark.js je takový plugin, který je napsán v čistém JavaScriptu, ale je také dostupný jako plugin jQuery. Byl vyvinut, aby nabízel více příležitostí než ostatní pluginy s možnostmi:

  • hledat klíčová slova odděleně místo celého termínu
  • mapová diakritika (Například pokud by "justo" mělo odpovídat také "justò")
  • ignorovat shody uvnitř vlastních prvků
  • použít vlastní prvek zvýraznění
  • použít vlastní třídu zvýraznění
  • mapovat vlastní synonyma
  • hledat také uvnitř iframe
  • obdržet nenalezeny podmínky

DEMO

Alternativně můžete vidět toto housle .

Příklad použití:

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

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

Je to zdarma a vyvinula open-source na GitHub ( reference projektu ).

27
dude

Zde je variace, která ignoruje a zachovává případ:

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

JSFiddle

Používá .each (), .replace (), .html (). Testováno s jQuery 1.11 a 3.2.

Ve výše uvedeném příkladu čte klíčové slovo, které má být zvýrazněno, a připojuje značku span s třídou 'highlight'. Text 'klíčové slovo' je zvýrazněn pro všechny vybrané třídy v .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;
}
2
Van Peer

Můžete použít můj zvýrazňovací plugin jQuiteLight , který může také pracovat s regulárními výrazy.

Instalace pomocí npm type:

npm install jquitelight --save

Instalace pomocí bower typ:

bower install jquitelight 

Použití:

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

Pokročilejší využití zde

2
iamawebgeek

Musíte získat obsah značky p a nahradit všechny barvy v ní zvýrazněnou verzí.

Nemusíte na to mít ani jQuery. :-)

2
Sebastian Hoitz

Napsal jsem velmi jednoduchou funkci, která používá jQuery k iteraci prvků zabalujících každé klíčové slovo třídou .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);
            });
        });
    }
}

Více informací:

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

1
Hawkee

Pomocí následujícího tlačítka funkce můžete zvýraznit libovolné slovo v textu. 

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

Jednoduše cílový prvek, který obsahuje text, výběr Wordu, aby se vybarvily, a barva volby. 

Zde je příklad

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

Použití

color_Word('my_words', 'possible', 'hotpink')

 enter image description here

1
Cybernetic

Vytvořil jsem repozitář na podobném konceptu, který mění barvy textů, jejichž barvy jsou rozpoznány html5 (nemusíme používat skutečné hodnoty #rrggbb a mohli bychom použít názvy jako standardizované html5 asi 140 z nich)

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>

0
abe312