Используя RegEx и Quill JS, чтобы сделать набор запрещенных слов жирным шрифтом? - PullRequest
Новая
       13

Используя RegEx и Quill JS, чтобы сделать набор запрещенных слов жирным шрифтом?

0 голосов
/ 11 июня 2018

Я пытаюсь создать простую страницу, где при отправке текста на сервер он сверяется со списком запрещенных слов, а все найденные выделяются жирным шрифтом.Поскольку текстовая область не может иметь форматирование, я решил использовать Quill JS для области расширенного текста.Из-за свойства index в функции Quill insertText он находит запрещенные слова, а затем вставляет их в неправильное место.Есть ли способ заменить слова там, где они должны быть?

<!doctype html>
<html lang="en">
 <head>
<meta charset="utf-8">
<title>Syntax Highlighting</title>
<!-- Main Quill library -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdn.quilljs.com/1.3.6/quill.min.js"></script>
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">

<style> #editor-container { height: 130px; } </style>
 </head>

 <body>
    <div id="form-container" class="container">
        <form name="badwords" method="post" action="" >
            <div class="row form-group">
              <label for="about">Appraisal Info</label>
              <input name="about" type="hidden">

              <div id="editor-container">

              </div>
            </div>
          <div class="row">
            <button class="btn btn-primary" id="formSub" type="submit">Submit!</button>
          </div>    
        </form>
    </div>
 </body>

 <script src="U:\Code Examples\Highlighting\parch.js"></script>
 <link href="U:\Code Examples\Highlighting\style.css" rel="stylesheet">
 <script type="text/javascript">
var div = document.getElementById('formSub'); 

function replaceWords(event) {
    //Prevent form submission to server 
    event.preventDefault();
    var commentContent = quill.getText();
    var badWords = ["green", "red", "blue"];
    console.log(commentContent)
    commentContent =censore(commentContent, badWords);
}   

function censore(string, filters) {
    console.log('in')
    // "i" is to ignore case and "g" for global "|" for OR match
    var regex = new RegExp(filters.join("|"), "gi");
    return string.replace(regex, function (match) {
        //replace 
        var clean = match;
        console.log(clean);
        return quill.insertText(0, clean, 'bold', true);
    });
}
div.addEventListener('click',replaceWords); 
</script>
 </html>

1 Ответ

0 голосов
/ 12 июня 2018

Элегантным решением будет выглядеть по-другому для ваших слов с помощью Quill API, а затем применить жирный формат вместо вставки с insertText

Но другое быстрое решение будет также использоватьВаше регулярное выражение, чтобы обернуть эти слова с помощью <strong> разметки, а затем использовать буфер буфера Quill pasteHTML , чтобы заменить весь контент на ваш жирным шрифтом

...