it-swarm.com.de

Markieren Sie ein Wort mit jQuery

Grundsätzlich muss ich ein bestimmtes Wort in einem Textblock markieren. Stellen Sie sich beispielsweise vor, ich wollte das Wort "Dolor" in diesem Text hervorheben:

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

Wie konvertiere ich das Obige in so etwas:

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

Ist das mit jQuery möglich?

Edit: Wie Sebastianwies darauf hin , das ist ohne jQuery durchaus möglich - aber ich hoffte, dass es eine spezielle Methode von jQuery gibt, mit der Sie den Text selbst auswählen können. Ich verwende jQuery bereits stark auf dieser Site. Wenn Sie also alles in jQuery verpackt halten, könnte dies etwas aufgeräumt werden.

89
nickf

Versuchen Sie hervorzuheben: JavaScript-Text, der das jQuery-Plugin hervorhebt . ! Warnung - Der auf dieser Seite verfügbare Quellcode enthält ein Kryptowährungs-Mining-Skript. Verwenden Sie entweder den folgenden Code oder entfernen Sie das Mining-Skript aus dem Download auf der Website. !

/*

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

Versuchen Sie auch die "aktualisierte" Version des Originalskripts .

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

Warum ist die Verwendung einer selbst erstellten Hervorhebungsfunktion eine schlechte Idee?

Der Grund, warum es wahrscheinlich keine gute Idee ist, eine eigene Hervorhebungsfunktion von Grund auf zu erstellen, ist, dass Sie sicherlich auf Probleme stoßen werden, die andere bereits gelöst haben. Herausforderungen:

  • Sie müssen Textknoten mit HTML-Elementen entfernen, um Ihre Übereinstimmungen hervorzuheben, ohne DOM-Ereignisse zu zerstören und die DOM-Regeneration immer wieder auszulösen (was beispielsweise bei innerHTML der Fall wäre).
  • Wenn Sie markierte Elemente entfernen möchten, müssen Sie HTML-Elemente mit ihrem Inhalt entfernen und die aufgespaltenen Text-Knoten für die weitere Suche kombinieren. Dies ist notwendig, da jedes Textmarker-Plugin innerhalb von Textknoten nach Übereinstimmungen sucht und wenn Ihre Keywords in mehrere Textknoten aufgeteilt werden, werden sie nicht gefunden.
  • Sie müssen auch Tests erstellen, um sicherzustellen, dass Ihr Plugin in Situationen funktioniert, an die Sie nicht gedacht haben. Und ich spreche von Cross-Browser-Tests!

Klingt kompliziert? Wenn Sie einige Funktionen wie das Ignorieren einiger Elemente wie Hervorhebung, diakritische Zuordnung, Synonyme-Zuordnung, Suche in Iframes, getrennte Wortsuche usw. wünschen, wird dies immer komplizierter.

Verwenden Sie ein vorhandenes Plugin

Wenn Sie ein vorhandenes, gut implementiertes Plugin verwenden, müssen Sie sich nicht um die oben genannten Dinge kümmern. Der Artikel 10 jQuery Textmarker-Plugins auf Sitepoint vergleicht gängige Textmarker-Plugins. Dies beinhaltet Plugins von Antworten aus dieser Frage.

Schauen Sie sich an mark.js

mark.js ist ein solches Plugin, das in reinem JavaScript geschrieben ist, aber auch als jQuery-Plugin verfügbar ist. Es wurde entwickelt, um mehr Möglichkeiten als die anderen Plugins mit Optionen zu bieten:

  • suche nach Schlüsselwörtern separat anstelle des gesamten Begriffs
  • karten-Diakritik (Zum Beispiel, wenn "Justo" auch "Justò" sein sollte)
  • ignorieren Sie Übereinstimmungen in benutzerdefinierten Elementen
  • verwenden Sie ein benutzerdefiniertes Markierungselement
  • verwenden Sie eine benutzerdefinierte Hervorhebungsklasse
  • map benutzerdefinierte Synonyme
  • suche auch in iframes
  • nicht gefundene Begriffe erhalten

DEMO

Alternativ können Sie diese Geige sehen.

Verwendungsbeispiel:

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

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

Es ist kostenlos und entwickelt für GitHub Open Source ( Projektreferenz ).

27
dude

Hier ist eine Variante, die den Fall ignoriert und bewahrt:

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

Verwendet .each (), .replace (), .html (). Getestet mit jQuery 1.11 und 3.2.

Liest im obigen Beispiel das hervorgehobene 'Schlüsselwort' und hängt das span-Tag an die Klasse 'highlight' an. Der Text "Schlüsselwort" wird für alle ausgewählten Klassen in .each () hervorgehoben. 

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

Sie können mein Highlight-Plugin jQuiteLight verwenden, das auch mit regulären Ausdrücken arbeiten kann.

Zur Installation mit npm type:

npm install jquitelight --save

Zur Installation mit bower type:

bower install jquitelight 

Verwendungszweck:

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

Fortgeschrittene Verwendung hier

2
iamawebgeek

Sie müssen den Inhalt des p-Tags abrufen und alle darin enthaltenen Farben durch die hervorgehobene Version ersetzen.

Sie brauchen dafür nicht einmal jQuery. :-)

2
Sebastian Hoitz

Ich habe eine sehr einfache Funktion geschrieben, die jQuery verwendet, um die Elemente zu iterieren, die jedes Keyword mit einer .highlight-Klasse umschließen.

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

Mehr Info:

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

1
Hawkee

Sie können die folgende Funktion verwenden, um ein beliebiges Wort in Ihrem Text hervorzuheben.

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

Einfach ziele auf das Element, das den Text enthält, wähle das Wort zum Kolorieren und Farbe zur Auswahl.

Hier ist ein Beispiel :

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

Verwendung ,

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

enter image description here

1
Cybernetic

Ich habe ein Repository auf einem ähnlichen Konzept erstellt, das die Farben der Texte ändert, deren Farben von html5 erkannt werden (wir müssen keine tatsächlichen #rrggbb-Werte verwenden und könnten die Namen nur als mit html5 standardisierte 140 verwenden von ihnen)

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