Ich versuche, den gesamten Text hervorzuheben, der mit einem Wort meines Suchtextes übereinstimmt.

Angenommen, der Suchtext der gesamte Text

Meine Abfrage gibt alle Datensätze zurück, deren Text eines der Wörter des obigen Textes enthält (wie bei der Textsuche in MSSQL).

Jetzt muss ich alle Übereinstimmungen mit jedem Wort in der Suche hervorheben. Mein aktueller Code kann nur Volltext hervorheben.

Mein aktueller Code:

getHighlightedText(text, higlight) {
  let parts = text.split(new RegExp(`(${higlight})`, 'gi'));
  return <span> { parts.map((part, i) => 
    <span key={i} style={part.toLowerCase() === higlight.toLowerCase() ? { color: '#93C74B' } : {} }>{part}</span>)
  } </span>;
}

Danke im Voraus.

1
Wajahat Qasim 18 Apr. 2018 im 10:11

3 Antworten

Beste Antwort

Sie können dies mit replace tun. Hier ein Beispiel:

const getHighlightedText = (text, higlight) => {
  let groups = higlight.split(" ").map(v => `(${v})`).join("|");
  return "<span>" + text.replace(new RegExp(groups, "gi"), g => `<span style="color:#93C74B">${g}</span>`) + "<span>";
}
let text = "Some text for testing";
let higlight = "TEXT testing";
document.write(getHighlightedText(text, higlight));

Dazu wird zuerst ein regulärer Ausdruck aus der gesuchten Zeichenfolge generiert, ein regulärer Ausdruck mit dieser Struktur (word1)|(word2)..... Anschließend wird replace verwendet, um alle diese Wörter durch <span> Elemente mit einem anderen Text zu ersetzen Farbe. Wenn Sie mehr über die Verwendung von replace mit einer Funktion erfahren möchten, können Sie dies tun HIER

1
Titus 18 Apr. 2018 im 07:32

In dieser Demo habe ich eine benutzerdefinierte Funktion geschrieben, die ein dynamisches RegExp-Objekt verwendet, damit es wiederverwendet werden kann. Es verwendet replace() und führt Folgendes aus:

Nimmt 2 Parameter:

 1. a String that needs to be searched

 2. a variable String that will be interpolated inside of a RegExp Object.

 3. Every match will be wrapped in a `<mark>` tag.

Die Syntax für ein RegExp unterscheidet sich von einem Regex-Literal. Ein wichtiger Unterschied besteht darin, dass \ auch für benötigt wird Meta-Flags wie \w müssen wie folgt maskiert werden: \\w.


Demo

var str = document.querySelector('main').innerHTML;

function markText(str, qry) {
  var rgx = new RegExp('\\b' + qry + '\\b', 'gi');
  var res = str.replace(rgx, `<mark>${qry}</mark>`);
  return res;
}

document.querySelector('main').innerHTML = markText(str, "Chuck Norris");
<main>
<p>Scientists believe the world began with the "Big Bang". Chuck Norris shrugs it off as a "bad case of gas". Chuck Norris actually can get blood from a turnip...and from whatever the hell else he wants. There is no chin behind Chuck Norris' beard. There is only another fist. Someone once videotaped Chuck Norris getting pissed off. It was called Walker: Texas Chain Saw Massacre Chuck Norris doesn't wash his clothes, he disembowels them. Chuck Norris' first job was as a paperboy. There were no survivors Chuck Norris will attain statehood in 2009. His state flower will be the Magnolia. Chuck Norris can slam a revolving door If Chuck Norris kicks a tree in a forest and no one was around, he chooses who he wants to hear it.</p>

<p>If you ask Chuck Norris what time it is, he always says, "Two seconds 'til." After you ask, "Two seconds 'til what?" he roundhouse kicks you in the face. Chuck Norris is the reason why Waldo is hiding.</p>

</main>
0
zer00ne 18 Apr. 2018 im 08:41

Dies kann einfach mit der Methode replace erfolgen:

getHighlightedText(text, higlight) {
   let kws = higlight.replace(/ /g, "|");
   return text.replace(new RegExp(`(${kws})`, "gi"),
        '<span key="$1" style="color: #93C74B;">$1</span>');
}
0
terry.qiao 18 Apr. 2018 im 07:34