JavaScript Parent durch indexOf herausfinden - Angular

[-Rayz-]

Guten Tag,

ich suche in einem string nach Namen. Wird der Name gefunden, erstelle ich drumherum ein span und zeige einen Tooltip an. Nun kann es aber sein, dass auch der Tooltip einen Namen enthält den ich suche. Ich möchte aber lediglich die Namen austauschen, die NICHT im Tooltip drin sind.
Wenn ich also einen index durch string.indexOf() finde, wie kann ich herausfinden, ob sich der index innerhalb meines spans befindet?

Vielen Dank vorab

 

[DaysShadow]

Ich kenne mich mit JS nicht großartig aus, aber du wirst doch sicherlich den String in ein DOM parsen und darin Dinge ändern können statt direkt in der "Stringsuppe" irgendwas ändern zu müssen?

 

[-Rayz-]

Es ist ein FormControl. Bei einem Treffer wird das Wort halt ausgetauscht:
...
const htmlStart = '<span class="glossar-tip border-bottom">';
const htmlEnd = '<span class="glossar-tip-text">' + gloss.description + '</span></span>';
newText = newText.replace(new RegExp(gloss.name + '\\b', 'gi'), a => htmlStart + a + htmlEnd);
....

 

[Bagbag]

Wenn du schon Angular nutzt, warum arbeitest du da denn mit HTML strings? Nutze Datenojekte, das Angular Template und Data-Binding dafür.

 

[Korialstrasz]

Ich würde hier hier den String mittles split(' ') in Token zerlegen und dann über das Array crawlen. Wird in einem Index der name gefunden ersetzt du dann einfach diese druch dein <span>-String und gehst weiter. Am ende das Array wieder mit join(' ') zusammen fügen.

 

[-Rayz-]

das mit split geht nicht. Glossar ist auch eine Liste und dann würde ich beim nächsten Durchlauf auch den Tooltip mit im string haben sofern ich den Namen natürlich finde.

 

[netzgestaltung]

du kannst dir eine kopie(clon) des originaltextes speichern und immer da drin suchen?

wenn du als als element-objekte hättest wäre es schon wesentlich einfacher.

 

[Fritz]

Mit dem split würde gehen. Wenn du Angular hast, kannst du beim onInit den string splitten und einer Variablen zuweisen. Diese wird dann immer bei einer Änderung modifiziert und am Schluss wieder zusammengefügt und einer neuer variablen zugweisen, welche dann im Template verwendet wird.

oder mal mit diesem regex versuchen, new RegExp([^>]gloss.name + '\\b', 'gi')

 

[-Rayz-]

Kam endlich wieder dazu das Thema anzugehen. Bin es komplett anders angegangen. Ich durchlaufe jeden String und innerhalb des strings überprüfe ich, ob ein Glossar Eintrag matched und füge diesen erst dann ein, wenn ich alle Positionen gefunden habe. Würde ich es sofort einfügen könnte es passieren, dass ich im Glossar Text weitere Treffer finde und das möchte ich ja vermeiden.

Object.keys(form.controls)
      .filter(f => f !== 'id' && f !== 'images')
      .forEach(key => {
        let formValue = form.controls[key].value;
        if (formValue && typeof formValue === 'string') {
          const splitResult = [];
          glossar.forEach(gloss => {
            formValue = formValue.replace(new RegExp(gloss.name + '\\b', 'gi'), a => {
              const htmlStart = '<span class="glossar-tip border-bottom">';
              const htmlEnd = '<span class="glossar-tip-text">' + gloss.description + '</span></span>';
              const html = htmlStart + a + htmlEnd;
              splitResult.push({key: '##' + a + '##', value: html});
              return '##' + a + '##';
            });
          });

          if (splitResult.length > 0) {
            splitResult.forEach(res => {
              formValue = formValue.replace(res.key, res.value);
            });
            form.controls[key].setValue(formValue);
          }
        }
      });

 

[-Rayz-]

Ich muss das Thema nochmal angehen da es noch nicht richtig läuft.
Problem Beispiel:

<li>gemäß<li>

Mein Regex:
new RegExp('\\b' + 'gemäß' + '\\b', 'gi')

Das Wort würde ich aber gar nicht finden weil ich vor und nach dem Wort ja nach einen Leerzeichen abfrage.

 

[AW4]

new RegExp('\\b' + 'gemäß' + '\\b', 'gi')
Das Wort würde ich aber gar nicht finden weil ich vor und nach dem Wort ja nach einen Leerzeichen abfrage.

Da liegst du etwas falsch.
Der Metacharacter \b matcht nicht auf Leerzeichen, sondern auf Word-Boundaries.
In "Regex" ausgedrückt matcht das

• zwischen \W\w (\W ist die Negation von \w*),
• auf das ^ bei ^\w und
• das $ bei \w$

aber ohne den Character der den Word-Boundary provoziert mit in den Match einzubeziehen.

*: \w ist äquivalent zu [A-Za-z0-9_]. \W ist also äquivalent zu [^A-Za-z0-9_].

Bist du dir denn sicher, dass du da tatsächlich die Regex \bgemäß\b für die Suche generierst und nicht irgendwas anderes?
Oder andersherum: Bist du dir sicher, dass da tatsächlich der String gemäß drinsteht und nicht irgendwas anderes?
Da sind schließlich ä und ß drin, die theoretisch auch mal anders formatiert sein können.

 

[-Rayz-]

Du hast recht, wenn ich das 'ä' mit 'a' austausche, klappt es.
https://regexr.com/6al7q

Also muss ich an dem encoding was ändern...

 

[-Rayz-]

leider komme ich hier nicht so wirklich weiter. Also mit dem Zusatz "u" am Ende geht es wohl mit dem Endcoding aber hier mal nochn Beispiel:

Regex: /\bTest\b/giu

<li>Test-Code</li>
<li>Test</li>
<li> Test </li>

Ergebnis müsste Zeile 2 und 3 sein.

 

[AW4]

Was willst du denn genau matchen und was nicht?
Das ist mir nicht ganz klar.

Hilfreich wäre ein Ausschnitt eines beispielhaften HTML-Dokuments, in dem Fälle enthalten sind, die ersetzt werden sollen und Fälle, die nicht ersetzt werden sollen.

Ansonsten kann ich dir noch https://www.regular-expressions.info/tutorial.html empfehlen, für umfassenden Einblick und Überblick in Sachen Regular Expressions.