JavaScript: Bibliothek - Find Text mit Objekt

Bibliothek selbst erstellen

Ich möchte jetzt unsere bib_oop.js um die oben vorgestellte Funktion erweitern:
findTxt()

Rufen wir uns nochmals kurz in Erinnerung wie unser Objekt arbeitet:

bib_oop.js 
function getObj(){
	// die Methode elem übernimmt an dieser Stelle die Arbeit
	this.elem =  function( identifier ) {
		// Element speichern
		const myElem = document.querySelectorAll( identifier );
		
		// Rückgabe des Elementes
		if ( myElem.length === 1 ) { 
			// Element ist eindeutig => ID oder
			// es wurde nur ein Element gefunden
			return myElem[0];
		} else { 
			// Mehrere Elemente vorhanden => Rückgabe Array
			return myElem;
		}
	};
	...
}

// Initialisierung
const bib = new getObj();

Jetzt erweitern wir unser Objekt bib um die Methode findTxt()

bib_oop.js 
function getObj(){
	...
	
	// START::: Find TXT
	this.findTxt = function(myroot, text){
		const root = this.elem(myroot);
		const results = []; // Array für Treffer
		
		// Rekursion starten
		const walker  = document.createTreeWalker( 
			root, // Start der Suche
			NodeFilter.SHOW_TEXT, // durchsucht Text-Knoten
			null, // Platzhalter für zusätzliche Filterregeln
			false
		);

		let node;
		// Solange unterhalb des Startelementes "walker" Nodes zu finden sind
		while( node = walker.nextNode() ){ 
			// Wenn Suchbegriff gefunden wurde in results pushen
			if( node.textContent.includes(text) ){
				// Nodes pushen
				results.push(node.parentElement);
			}
		}
		return results;
	}
	// ENDE::: Find TXT
}

// Initialisierung
const bib = new getObj();

Sehen wir uns nun den Aufruf unserer Methode an:
bib.findTxt( Selektor, Suchbegriff);

Jetzt wo wir das angepasst haben sehen wir uns abermals die Auswertung an.

JavaScript 
// Ausführen
const textNodes = bib.findTxt( '#wrapper' , 'Suchbegriff');
// Array auslesen
textNodes.forEach( el => {
	// Ausgabe für id's
	el.id;
	...
	// Ausgabe für ClassName
	el.className;
	...
	// Do somthing
});

Wenn Ihr Anregungen oder Kommentare habt, seid so nett und kontaktiert mich unter: Kontakt

Kopiert Euch gerne den Code und probiert es aus: Code
Kopiert Euch die gesamte bib_oop.js als bib_oop.txt: Code

Beispiel
Das ist ein Beispieltext
dem Du bitte keine Beachtung

schenken solltest.

Aber in diesem Beispieltext kannst Du auch den Text finden.

Gib uns alle Eletern-Elemente aus für:

Suchbegriff:

Ausgabe:

Ausgabe:


Code 

HTML:

<div id="wrapper" class="my-wrapper">
	Das ist ein Beispieltext
	<div id="ebene-1" class="cl-ebene-1">
		dem Du <span id="span-eins" class="sp-eins">bitte keine</span> 
		Beachtung
		<p id="p-1" class="p-1">schenken solltest.</p>
		<div id="ebene-2" class="eb-2">
			Aber in diesem Beispieltext 
			<span id="span-zwei" class="new-class">kannst Du auch</span> 
			den Text finden.
		</div>
	</div>
</div>
<p class="my-fett">
	Gib uns alle Eletern-Elemente aus für:
</p>
<form name="skillflow">
	<p>
		Suchbegriff:<br> 
		<select id="suche">
			<option value="Beispieltext">Beispieltext</option>
			<option value="Du">Du</option>
			<option value="bitte">bitte</option>
			<option value="schenken">schenken</option>
			<option value="finden">finden</option>
		</select>
	</p>
	<p>
		Ausgabe:<br> 
		<select id="selector">
			<option value="id">id</option>
			<option value="className">className</option>
		</select>
	</p>
</form>
<div id="target">
	<span>Ausgabe:</span><br>
	<div id="ausgabe" class="fett commentar"></div>
</div>
</div>
<br>
<button id="buttonid" class="ancor_button" name="buttonname" 
onclick="newAusgabe()">Ausgeben</button>






CSS:

.example-wrapper select,
.example-wrapper option{
	color: var(--black) !important;
}

.my-fett{
	font-weight: 600;
	color: rgba(112, 175, 4, 1) !important;
}






JavaScript: bib_oop.js:

/* START::: getObj() */
function getObj(){
	// die Methode elem übernimmt an dieser Stelle die Arbeit
	this.elem =  function( identifier ) {
		// Element speichern
		const myElem = document.querySelectorAll( identifier );
		
		// Rückgabe des Elementes
		if ( myElem.length === 1 ) { 
			// Element ist eindeutig => ID oder
			// es wurde nur ein Element gefunden
			return myElem[0];
		} else { 
			// Mehrere Elemente vorhanden => Rückgabe Array
			return myElem;
		}
	};
	/* ENDE::: getObj() */
...
	/* START::: Finde-Text */
	this.findTxt = function(myroot, text){
		const root = this.elem(myroot);
		const results = []; // Array für Treffer
		
		// Rekursion starten
		const walker  = document.createTreeWalker( 
			root, // Start der Suche
			NodeFilter.SHOW_TEXT, // durchsucht Text-Knoten
			null, // Platzhalter für zusätzliche Filterregeln
			false
		);

		let node;
		// Solange unterhalb des Startelementes "walker" Nodes zu finden sind
		while( node = walker.nextNode() ){ 
			// Wenn Suchbegriff gefunden wurde in results pushen
			if( node.textContent.includes(text) ){
				// Nodes pushen
				results.push(node.parentElement);
			}
		}
		return results;
	}
	/* ENDE::: Finde-Text */
}
// Initialisierung
const bib = new getObj();



JavaScript OOP:

function newAusgabeOOP(){
	
	// Auslesen der Options
	const myNewTx  = bib.elem( '#suche' ).value;
	const myNewSel = bib.elem( '#selector' ).value;
	
	// Ausführen
	const textNodes  = bib.findTxt( '#wrapper', myNewTx );
	let myNewAusgabe	= '';
	// Array auslesen
	textNodes.forEach( el => {
		if(myNewSel === 'id'){
			// Ausgabe für id's
			myNewAusgabe += el.id+'
';
		}else{
			// Ausgabe für ClassName
			myNewAusgabe += el.className+'<br>';
		}
	});
	
	bib.elem('#ausgabe').innerHTML = myNewAusgabe;
}