RError.com

RError.com Logo RError.com Logo

RError.com Navigation

  • 主页

Mobile menu

Close
  • 主页
  • 系统&网络
    • 热门问题
    • 最新问题
    • 标签
  • Ubuntu
    • 热门问题
    • 最新问题
    • 标签
  • 帮助
主页 / 问题 / 951991
Accepted
De.Minov
De.Minov
Asked:2020-03-04 04:17:06 +0000 UTC2020-03-04 04:17:06 +0000 UTC 2020-03-04 04:17:06 +0000 UTC

以块为单位在字典中搜索单词

  • 772

我想写一些“antimat”。
有文本所在的块,重点是“走过”这些块,检查文本是否存在“禁止词”并用某些东西替换它。

经过思考,我决定不对单词本身进行任何替换,而是简单地将其包裹起来span并将其设置为,比如说filter: blur(5px).

哇..

关键是,在我的脑海中,实现是这样的..
“bedwords”,循环遍历块,循环遍历“bedwoods”+在文本中搜索一个单词,找到它后,用<span class="badword">слово</span>..替换这个单词

我会问这个问题,我想在其中获得现成的代码,但我也会尝试自己编写。
虽然没有,甚至不是那样,但总的来说,这是一种比赛,最后,“喜欢”最多的答案将获得500个萝卜。
截止日期,直到 2019 年 3 月 10 日

总的来说,我希望它会很有趣并且管理员不会关闭它)

假设它看起来像这样:

let badword = [
  'Lorem',
  'non',
  'lectus',
  'ligula',
  'nisi'
];
<div class="content">
  <div class="item">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </div>
  <div class="item">
     Suspendisse non pharetra mauris. Suspendisse a lacinia lacus. Nulla facilisi.
  </div>
  <div class="item">
     Suspendisse eu lectus aliquam, porttitor est eleifend, blandit mauris.
  </div>
  <div class="item">
     Nunc ut bibendum ligula, eu consequat odio. Praesent fermentum nisi a lobortis rhoncus. Phasellus vel metus eu dolor molestie porta. 
  </div>
</div>

javascript
  • 4 4 个回答
  • 10 Views

4 个回答

  • Voted
  1. Best Answer
    UModeL
    2020-03-06T18:46:05Z2020-03-06T18:46:05Z

    如果块内容.item不需要嵌套标签,则:

    • 不需要数组;
    • 代码减少到最低限度;
    • 测试词通过竖线添加|;
    • 而不是整个测试词,可能会有额外的选择条件。

    let badword = '(Lorem|non|lectus|ligula|nisi)';
    let reg = new RegExp(badword, 'gim');
    
    $('.item').each(function() {
      let text = $(this).text();
      text = text.replace(reg, '<span class="bw">$1</span>');
      $(this).html(text);
    });
    .bw { color: red; -webkit-filter: blur(3px); filter: blur(3px); }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    
    <div class="content">
      <div class="item">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </div>
      <div class="item">
        Suspendisse non pharetra mauris. Suspendisse a lacinia lacus. Nulla facilisi.
      </div>
      <div class="item">
        Suspendisse eu lectus aliquam, porttitor est eleifend, blandit mauris.
      </div>
      <div class="item">
        Nunc ut bibendum ligula, eu consequat odio. Praesent fermentum nisi a lobortis rhoncus. Phasellus vel metus eu dolor molestie porta.
      </div>
    </div>

    如果允许任何格式,则需要更复杂的逻辑:

    var badword = 'Lorem|non|lectus|ligula|(про)?тест(им)?|nisi|imgur';
    var reg = new RegExp('(^|[^\\wа-яё])(' + badword + ')(?![\\wа-яё])', 'gi');
    
    function fAntiSwear(oElem) {
      [...oElem.contents()].forEach(function(oNode) {
        if (oNode.nodeType === Node.ELEMENT_NODE) { fAntiSwear($(oNode)); } 
        else if (oNode.nodeType === Node.TEXT_NODE) {
          $(oNode).replaceWith($(oNode).text().replace(reg, '$1<span class="bw">$2</span>'));
        }
      });
    }
    
    fAntiSwear($('.content'));
    .bw { color: red; -webkit-filter: blur(3px); filter: blur(3px); }
    .lectus { color: blue; }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div class="content">
      <div class="item">
        Lorem ipsum dolor sit amet, <i>consecteturLorem</i> adipiscing elit.
      </div>
      <div class="item">
        Suspendisse non pharetra mauris. Suspendisse anon lacinia lacus. Nulla facilisi.
      </div>
      <div class="item">
        Suspendisse eu <u class="lectus">lectus</u> aliquam, porttitor est eleifend, blandit mauris.
      </div>
      <div class="item">
        Nunc ut bibendum <b class="lectus">ligula</b>, eu consequat <b class="lectus">odio</b>. Praesent fermentum nisi a lobortis rhoncus. Phasellus vel metus eu <img src="https://isstatic.askoverflow.dev/ieLDa.jpg?s=32&g=1"> dolor molestie porta.
      </div>
      <div class="item">
        Протестим слово тест. Ну что, тестим этот протест против теста?
      </div>
    </div>

    资源

    • 9
  2. Misha Saidov
    2020-03-06T21:23:20Z2020-03-06T21:23:20Z

    所以这是我的选择。

    这个怎么运作?

    要在元素及其所有子元素中查找坏词,您只需findBadWords()在我们需要的元素上设置函数。输入有 2 个参数:jq元素本身(例如body)和字典(字符串数组)。例如findBadWords($("body"), ["дурак", "дебил", "пипец"]);.

    代码递归地遍历所有textNode这些,如果它从字典中找到一些东西,它会包装这个词span并用这个新词替换前一行。

    (!!!) 代码需要改进,理想情况下应该重写为 vanillajs以提高性能。

    const findBadWords = (el, dictionary) => {
      let contents = Array.from(el.contents()); // находим всех детей элемента, в том числе и текстовых
      contents.forEach(item => { // проверяем каждого ребенка 
        if (item.nodeType === 1) { // если это не текст то..
          findBadWords($(item), dictionary); // проверяем дальше его детей
        }
        else if (item.nodeType === 3) { // если это просто текст то..
          let regexp = new RegExp(dictionary.join("|"), "gim"); // формируем регулярку из нашего словаря
          $(item).replaceWith(item.textContent.replace(regexp, m => `<span class="badword">${m}</span>`)); // заменяем найденный элемент нашим обработанным текстом
        }
      });
    }
    
    $("#start").one("click", () => {
      findBadWords($("#root"), ["дурак", "дебил", "лошара", "пипец"]);
    });
    .badword {
      color: red;
      font-weight: bold;
    }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    
    <div id="root">
      <div>
        Дурак - плохое слово.
        <br>
        <span>Дебил лучше тоже не говорить</span>
        <br>
        <button>Кнопка со словом пипец</button>
      </div>
      <br>
      <div>
        <div>
          <div>
            <div>
              <div>
                Очень глубоко расположенный лошара
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    
    <br><br><br>
    <button id="start">НАЖМИ ЧТОБЫ НАЙТИ ПЛОХИЕ СЛОВА</button>

    如您所见,代码并不关心坏词的位置和深度。如果有任何缺点或改进建议 - 请写在评论中。

    • 6
  3. Stranger in the Q
    2020-03-08T04:05:28Z2020-03-08T04:05:28Z

    在与 DOM 交互方面,我的回答不是很新颖,但我决定不使用外部库。

    我建议使用更智能的搜索实现。

    这种搜索会改善还是恶化是另一个问题,这里需要微调。

    为了搜索坏词,这里使用了Levenshtein 距离分析。

    单词A和B之间的Levenshtein 距离- 简而言之,这是单词A中需要更改的字符数才能得到单词B。

    这使得找到相似的词成为可能。

    我没有在这里给出这个算法的简单递归实现,你可以在这个链接上阅读它。

    为确保字典中的工作,丢弃结尾,然后搜索包含Levenshtein 距离小于或等于2的单词的所有元素(您可以通过为每个单词设置自己的阈值距离来稍微改进搜索)和然后是 DOM 替换。

    PS。vygreb 标点的正则表达式也需要在应用的地方进行改进。

    let minDistance = 2;
    
    let badword = [
      'Lore',
      'non',
      'lectu',
      'ligula',
      'nisi'
    ];
    
    check(document.querySelector('.content'));
    
    function check(el) {
      if (el.nodeType === Node.TEXT_NODE) {
         markBadwords(el);
      } else {
        [...el.childNodes].forEach(check);
      }
    }
    
    function markBadwords(el) {
    
      let found = el.textContent.split(/,?\s+/).filter(word => {
        return minDistance >= Math.min.apply(null, badword.map(bad => {
          return distance(bad, word.toLowerCase());
        }));
      });
      
      if (!found.length)
        return;
      
      let element = document.createElement('span');
      let regex = new RegExp(found.join("|"), "gim");
      element.innerHTML = el.textContent.replace(regex, w => `<span class="bad">${w}</span>`);
      el.replaceWith(element);
    
    }
    
    // https://en.wikibooks.org/wiki/Algorithm_Implementation/Strings/Levenshtein_distance
    function distance(a, b) {
      if (a.length === 0) return b.length; 
      if (b.length === 0) return a.length;
    
      var matrix = [];
    
      // increment along the first column of each row
      var i;
      for (i = 0; i <= b.length; i++) {
        matrix[i] = [i];
      }
    
      // increment each column in the first row
      var j;
      for (j = 0; j <= a.length; j++) {
        matrix[0][j] = j;
      }
    
      // Fill in the rest of the matrix
      for (i = 1; i <= b.length; i++) {
        for (j = 1; j <= a.length; j++) {
          if (b.charAt(i-1) == a.charAt(j-1)) {
            matrix[i][j] = matrix[i-1][j-1];
          } else {
            matrix[i][j] = Math.min(matrix[i-1][j-1] + 1, // substitution
                                    Math.min(matrix[i][j-1] + 1, // insertion
                                             matrix[i-1][j] + 1)); // deletion
          }
        }
      }
    
      return matrix[b.length][a.length];
    };
    .bad {
      filter: blur(3px)
    }
    <div class="content">
      <div>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </div>
      <div>
         Suspendisse non pharetra mauris. Suspendisse a lacinia lacus. Nulla facilisi.
      </div>
      <div>
         Suspendisse eu lectus aliquam, porttitor est eleifend, blandit mauris.
         <button>
            Suspendisse eu lectus aliquam, porttitor est eleifend, blandit mauris.
        </button>
      </div>
      <div>
         Nunc ut bibendum ligul, eu consequat odio. Praesent fermentum nisi a lobortis rhoncus. Phasellus vel metus eu dolor molestie porta. 
      </div>
    </div>

    • 4
  4. Qwertiy
    2020-03-08T01:16:06Z2020-03-08T01:16:06Z

    如果可以重新创建以前创建的元素,那么可以非常简单地完成:

    var div = document.querySelector(".content");
    div.innerHTML = div.innerHTML.replace(/(^|.)(Lorem|non|lectus|ligula|nisi)(.|$)/gi, (m, l, w, r) => l.toLowerCase() === l.toUpperCase() && r.toLowerCase() === r.toUpperCase() ? `${l}<span class="blur">${w}</span>${r}` : m)
    .blur {
      color: red;
    }
    <div class="content">
      <div class="item">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </div>
      <div class="item">
         Suspendisse non pharetra mauris. Suspendisse a lacinia lacus. Nulla facilisi.
      </div>
      <div class="item">
         Suspendisse eu lectus aliquam, porttitor est eleifend, blandit mauris.
      </div>
      <div class="item">
         Nunc ut bibendum ligula, eu consequat odio. Praesent fermentum nisi a lobortis rhoncus. Phasellus vel metus eu dolor molestie porta. 
      </div>
      <div class="item">
        &lt;script&gt;alert('non');alert('nonconforming');&lt;/script&gt;
      </div>
    </div>

    如果无法重新创建元素,那么您应该使用以下内容:https ://ru.stackoverflow.com/a/919286/178988

    • 3

相关问题

Sidebar

Stats

  • 问题 10021
  • Answers 30001
  • 最佳答案 8000
  • 用户 6900
  • 常问
  • 回答
  • Marko Smith

    根据浏览器窗口的大小调整背景图案的大小

    • 2 个回答
  • Marko Smith

    理解for循环的执行逻辑

    • 1 个回答
  • Marko Smith

    复制动态数组时出错(C++)

    • 1 个回答
  • Marko Smith

    Or and If,elif,else 构造[重复]

    • 1 个回答
  • Marko Smith

    如何构建支持 x64 的 APK

    • 1 个回答
  • Marko Smith

    如何使按钮的输入宽度?

    • 2 个回答
  • Marko Smith

    如何显示对象变量的名称?

    • 3 个回答
  • Marko Smith

    如何循环一个函数?

    • 1 个回答
  • Marko Smith

    LOWORD 宏有什么作用?

    • 2 个回答
  • Marko Smith

    从字符串的开头删除直到并包括一个字符

    • 2 个回答
  • Martin Hope
    Alexandr_TT 2020年新年大赛! 2020-12-20 18:20:21 +0000 UTC
  • Martin Hope
    Alexandr_TT 圣诞树动画 2020-12-23 00:38:08 +0000 UTC
  • Martin Hope
    Air 究竟是什么标识了网站访问者? 2020-11-03 15:49:20 +0000 UTC
  • Martin Hope
    Qwertiy 号码显示 9223372036854775807 2020-07-11 18:16:49 +0000 UTC
  • Martin Hope
    user216109 如何为黑客设下陷阱,或充分击退攻击? 2020-05-10 02:22:52 +0000 UTC
  • Martin Hope
    Qwertiy 并变成3个无穷大 2020-11-06 07:15:57 +0000 UTC
  • Martin Hope
    koks_rs 什么是样板代码? 2020-10-27 15:43:19 +0000 UTC
  • Martin Hope
    Sirop4ik 向 git 提交发布的正确方法是什么? 2020-10-05 00:02:00 +0000 UTC
  • Martin Hope
    faoxis 为什么在这么多示例中函数都称为 foo? 2020-08-15 04:42:49 +0000 UTC
  • Martin Hope
    Pavel Mayorov 如何从事件或回调函数中返回值?或者至少等他们完成。 2020-08-11 16:49:28 +0000 UTC

热门标签

javascript python java php c# c++ html android jquery mysql

Explore

  • 主页
  • 问题
    • 热门问题
    • 最新问题
  • 标签
  • 帮助

Footer

RError.com

关于我们

  • 关于我们
  • 联系我们

Legal Stuff

  • Privacy Policy

帮助

© 2023 RError.com All Rights Reserve   沪ICP备12040472号-5