Форум

рони · #31 (**permalink**) 16.12.2019, 16:15

Adrikks,

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        label {
            display: flex;
            flex-direction: column;
        }
        #result mark {
            color: #FF0000;
        }
    </style>
</head>
<body>
    <label>
        Исходная строка:
        <input id="text" placeholder="Введите текст..." value="АЛИЕВА БАЙНАТ АБДУРАХМАНОВНА">
    </label>
    <label>
        Искомые совпадения:
        <input id="search" placeholder="Введите текст..." value="а б">
    </label>
    <p id="result"></p>
    <script>
RegExp.escape = s => s.replace(/[[\\^$.|?*+()]/gim, "\\$&");
function mark(string) {
    const node = document.createElement("mark");
    node.textContent = string;
    return node;
}
search.addEventListener("input", () => {
    const value = text.value;
    let parts = search.value.trim();
    const length = parts.length;
    if(!value || !length) {result.textContent = text.value; return};
    parts = parts.split(/\s+/).map(pattern => new RegExp("(" +RegExp.escape(pattern) +")", "i"));
    result.textContent = "";
    let temp = [];
    for (let i = 0; i < value.length; ) {
        let k = i, arrFindIndex = [];
        let found = parts.every(reg => {
        reg.lastIndex = 0;
        let match = reg.exec(value.slice(k));
        if(match) {
        k += match.index
        arrFindIndex.push(k, k += match[0].length);
        return true
        }
        return false;
        });
        if(found) {i = k; temp.push(...arrFindIndex)}
        else i++;
    }
    let index = 0;
    for (let i = 0; i < temp.length; i += 2){
    result.append(
            value.slice(index, index = temp[i]),
            mark(value.slice(index, index = temp[i + 1]))
        );
    }
   result.append(value.slice(index));
});
search.dispatchEvent(new Event("input"));
</script>
</body>
</html>

Adrikks · #32 (**permalink**) 16.12.2019, 18:39

рони,
спасибо большое за помощь и за терпение.

JoenRules · #33 (**permalink**) 17.12.2019, 16:40

рони,
решаю подобную задачу. Можете объяснить, что вы делаете здесь?

RegExp.escape = s => s.replace(/[[\\^$.|?*+()]/gim, "\\$&");

и здесь

let found = parts.every(reg => {
        reg.lastIndex = 0;
        let match = reg.exec(value.slice(k));
        if(match) {
        k += match.index
        arrFindIndex.push(k, k += match[0].length);
        return true
        }
        return false;
        });
        if(found) {i = k; temp.push(...arrFindIndex)}
        else i++;
    }
    let index = 0;
    for (let i = 0; i < temp.length; i += 2){
    result.append(
            value.slice(index, index = temp[i]),
            mark(value.slice(index, index = temp[i + 1]))
        );
    }
   result.append(value.slice(index));

(комментарии возможно), если не трудно. Относительно недавно начала изучать JavaScript.

рони · #34 (**permalink**) 17.12.2019, 17:27

JoenRules,
RegExp.escape экранирование служебных символов https://learn.javascript.ru/regexp-escaping
. это любой символ в RegExp
\. это просто точка
если в строке поиска есть точка, нужно "уточнить" (экранировать) что это именно точка.
подробнее по ссылке.

let found = parts.every(reg => { // parts -> массив всех совпадений
       // every ->  каждое совпадение должно быть в проверяемой строке
        reg.lastIndex = 0; //искать с начала строки
        let match = reg.exec(value.slice(k));//проверка совпадения
        if(match) {//если совпадение есть
        k += match.index
        arrFindIndex.push(k, k += match[0].length); //запоминаем совпадение с такого символа по такой
        return true // продолжаем поиск
        }
        return false;// прекращаем поиск если хотябы одного совпадения нет
        });
        if(found) {i = k; temp.push(...arrFindIndex)} //если поиск был удачный сокращаем строку на длину совпадений
        // и сохраняем все сопадения
        else i++; //иначе сокращаем строку на один символ
        // продолжаем поиск по строке пока есть длина строки
    }
    let index = 0;//вывод результата с начала строки
    for (let i = 0; i < temp.length; i += 2){// цикл по участкам совпадения
    result.append(
            value.slice(index, index = temp[i]), // вывод строки до совпадения
            mark(value.slice(index, index = temp[i + 1]))// вывод элемента mark с текстом совпадения
        );
    }
   result.append(value.slice(index)); //вывод последнего участка строки

Форум

Справочник

Discord чат

Курсы javascript