Javascript regex Vorkommen von Hashtags in einem Textfeld zu zählen

Question

Ich versuche, einen Zählwert vor jedem hashtag in einem Textfeld wie folgt hinzuzufügen:

"An example #string containing a #few #hashtags" 
"An example 1:#string containing a 2:#few 3:#hashtags" 

brauche ich die Zähler in Echtzeit angezeigt werden, wenn der Benutzer ist tippen.

ich einen keyup() Ereignisrückruf bin mit dem Wert des Textbereiches zu überprüfen und vor jedem Auftreten eines Hashtag die Zählung einzufügen versuchen, eine Regex mit:

let value = ''; 
 
let _textarea = document.querySelector('textarea'); 
 
_textarea.addEventListener('keyup', e => { 
 
    value = _textarea.value; 
 
    let tags = value.match(/(#\S*)/g); //Match all hashtags 
 
    
 
    
 
    let i = 0; 
 
    value = value.replace(/(#\S*)/g, matched => { 
 
    \t console.log(matched, i); 
 
    i++; 
 
    return i + ':' + matched; 
 
    }); 
 
    
 
    
 
    _textarea.value = value; 
 
    console.log(tags); 
 
});

<textarea></textarea>

Das Problem ist, dass dies den Zähler nach dem Auslösen jedes Keyup-Ereignisses kontinuierlich vorstellt.

Was wäre eine geeignete Lösung dafür?

Answer 1

Verbesserung auf @Cameron ‚s answer hat, ermöglicht dies eine für eine Hashtag, das auch am Anfang eines Strings verwendet wird.

let _textarea = document.querySelector('textarea'); 
 
_textarea.addEventListener('keyup', e => { 
 
    let target = e.target; 
 
    let value = target.value; 
 
    
 
    let i = 0; 
 
    value = value.replace(/.?#/g, matched => { 
 
    i++; 
 
    let output = matched; 
 
    if (/(?:[^:]|^)#/.test(matched)) { 
 
     if(matched.length > 1) { 
 
     output = `${matched[0]}${i}:${matched[1]}`; 
 
     } else { 
 
     output = `${i}:${matched[0]}`; 
 
     } 
 
    } 
 
    return output; 
 
    }); 
 
    
 
    _textarea.value = value; 
 
});

<textarea></textarea>

Answer 2

In value.replace/.#/g verwenden. Dieser Regex gibt das Hashtag mit dem vorherigen Symbol zurück. So kann man, wenn es überprüfen „:“ oder nicht

value = value.replace(/.#/g, matched => { 
    i++; 
    if(matched[0] === ':') 
     return matched; 
    return i + ':' + matched; 
}); 

Answer 3

let _textarea = document.querySelector('textarea'); 
 
_textarea.addEventListener('keyup', e => { 
 
    let target = e.target; 
 
    let value = target.value; 
 
    
 
    let i = 0; 
 
    value = value.replace(/.?#/g, matched => { 
 
    i++; 
 
    let output = matched; 
 
    if (/[^:]#/.test(matched)) { 
 
     output = `${matched[0]}${i}:${matched[1]}`; 
 
    } 
 
    return output; 
 
    }); 
 
    
 
    _textarea.value = value; 
 
});

<textarea></textarea>

Ich habe einige Änderungen an Ihrem Code gemacht, dass ich erreichen glauben, was Sie wollen.

In Ihrer Funktion ersetzen Ich habe eine bedingte fügte hinzu, dass nur der Index auf dem Hashtag legt, wenn es nicht einen Doppelpunkt vor ihm bereits