时间戳

首页 > 解决方案 > 使用 RegEx 和 Quill JS 将一组禁用词加粗？

javascript - 使用 RegEx 和 Quill JS 将一组禁用词加粗？

问题描述

我正在尝试创建一个简单的页面，当您将文本提交到服务器时，它会检查被禁止的单词列表，并且找到的任何内容都会变为粗体。由于 textarea 没有格式，我决定将 Quill JS 用于富文本区域。由于 Quills insertText 函数的 index 属性，它会找到被禁止的单词，然后将它们插入错误的位置。有没有办法将单词替换到应该在的位置？

<!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>

标签： javascriptjqueryregexrich-text-editorquill

解决方案

一个优雅的解决方案是使用 Quill API 以不同的方式查找您的单词，然后应用粗体格式而不是插入insertText

但另一个快速的解决方案是使用您的正则表达式用<strong>标记包装这些单词，然后使用 Quill 剪贴板pasteHTML 方法用粗体标记替换所有内容

推荐阅读