У меня есть contenteditable div, из которого я хочу обнаружить только текущие типизированные хэштеги, чтобы я мог соответствующим образом отправлять предложения из базы данных.Я попробовал это двумя способами.(есть демоверсии jsfiddles для обоих)
Первый - получить все хэштеги через регулярное выражение, а затем выполнить цикл для каждого из них (потому что я не знаю, как определить текущий типизированный) черезте в базе данных.это плохая производительность, так как для всех других хэшей, которые не предназначены для работы с ними, есть циклическое прохождение через базу данных, которая может содержать несколько тысяч предложений.
</p>
<pre><code> for(var k=0; k < MatchingInput.length; k++)
{
let SuggestionsPerTag = 5;
for (var i=0; i<valuesDB.length; i++)
{
let InputMatchReg = RegExp(MatchingInput[k].slice( 1 ));// slice #
if(InputMatchReg.test(valuesDB[i].key)
&& SuggestionsPerTag != 0
&& InputMatchReg.source.length > 1) // there have to be two letters after #
{
console.log("MatchingInput with DB: "+valuesDB[i].key);
if(!valuesBrowser.filter(item => item.key === valuesDB[i].key).length)
{
valuesBrowser.push({key: valuesDB[i].key})
SuggestionsPerTag--
}
}
}
}
https://jsfiddle.net/apbln/ep5chj0y/127/
второй - искать набираемый хэш, затем искать дальнейший ввод и получать строку.Этот подход очень подвержен ошибкам, так как мне нужно искать пробелы, пробелы, щелкать мышью в другую часть поля и писать в ней пользователя, вставлять текст, кнопка удаления, crtl + x ...
</p>
<pre><code>browserInputDiv.addEventListener("keypress", function AfterHash(event) {
if(event.keyCode == 35) // first hash
trigger = true;
if(event.keyCode == 32)// space
{
trigger = false;
console.log("trigger false")
typedtext = ""
}
if(trigger == true)
{console.log("trigger true")
if(event.keyCode == 8) // not working
{
console.log("backspace")
}
typedtext = typedtext + String.fromCharCode(event.keyCode)
console.log(typedtext)
hashLength++;
console.log(hashLength)
};
});
browserInputDiv.addEventListener("click", function clickedwhiletyping() {
trigger = false;
});
https://jsfiddle.net/apbln/250wjfxo/11/