javascript - ReactJS:从Contenteditable div中删除除某些特定标签外的所有HTML标记

我有一个contenteditable div，我希望如果有人将某些内容粘贴到contenteditable div中，那么HTML格式和标记将被剥离并变成纯文本。

但是这样做时，我不希望删除某些特定的img标签。我有不想删除的标签列表。
我想到了这个，但是这也删除了我的特定img标签。

var html = ReactDOM.findDOMNode(this).innerHTML;

var initialBreaks = /^([^<]+)(?:<div[^>]*><br[^>]*><\/div><div[^>]*>|<p[^>]*><br[^>]*><\/p><p[^>]*>)/
var initialBreak = /^([^<]+)(?:<div[^>]*>|<p[^>]*>)/
var wrappedBreaks = /<p[^>]*><br[^>]*><\/p>|<div[^>]*><br[^>]*><\/div>/g
var openBreaks = /<(?:p|div)[^>]*>/g
var breaks = /<br[^>]*><\/(?:p|div)>|<br[^>]*>|<\/(?:p|div)>/g
var allTags = /<\/?[^>]+>/g
var newlines = /\r\n|\n|\r/g

 html = html.replace(initialBreaks, '$1\n\n')
         .replace(initialBreak, '$1\n')
         .replace(wrappedBreaks, '\n')
         .replace(openBreaks, '')
         .replace(breaks, '\n')
         .replace(allTags, '')
         .replace(newlines, '<br>')

.replace(allTags, '')替换所有内容。需要它来保存我的特定img标签

最佳答案

描述

<\/?(?!img)[a-z]+(?=[\s>])(?:[^>=]|=(?:'[^']*'|"[^"]*"|[^'"\s]*))*\s?\/?>

替换为：无



此正则表达式将执行以下操作：


查找所有打开和关闭html标签
忽略img标签
避免了使HTML中的模式匹配变得困难的困难情况


例

现场演示

https://regex101.com/r/sI2nO0/3

示范文本

请注意，嵌套在第一个锚标记内部的困难边缘情况。

<span><a onmouseover=' if ( 3 > a ) { var
string=" <img src=NotTheDroidYouAreLookingFor.jpg>; "; } '
 href="link.html">This is a droid I'm looking
for: <img src=DesiredDroids.png></a>
</span>

更换后

This is a droid I'm looking
for: <img src=DesiredDroids.png>

说明

NODE                     EXPLANATION
----------------------------------------------------------------------
  <                        '<'
----------------------------------------------------------------------
  \/?                      '/' (optional (matching the most amount
                           possible))
----------------------------------------------------------------------
  (?!                      look ahead to see if there is not:
----------------------------------------------------------------------
    img                      'img'
----------------------------------------------------------------------
  )                        end of look-ahead
----------------------------------------------------------------------
  [a-z]+                   any character of: 'a' to 'z' (1 or more
                           times (matching the most amount possible))
----------------------------------------------------------------------
  (?=                      look ahead to see if there is:
----------------------------------------------------------------------
    [\s>]                    any character of: whitespace (\n, \r,
                             \t, \f, and " "), '>'
----------------------------------------------------------------------
  )                        end of look-ahead
----------------------------------------------------------------------
  (?:                      group, but do not capture (0 or more times
                           (matching the most amount possible)):
----------------------------------------------------------------------
    [^>=]                    any character except: '>', '='
----------------------------------------------------------------------
   |                        OR
----------------------------------------------------------------------
    =                        '='
----------------------------------------------------------------------
    (?:                      group, but do not capture:
----------------------------------------------------------------------
      '                        '\''
----------------------------------------------------------------------
      [^']*                    any character except: ''' (0 or more
                               times (matching the most amount
                               possible))
----------------------------------------------------------------------
      '                        '\''
----------------------------------------------------------------------
     |                        OR
----------------------------------------------------------------------
      "                        '"'
----------------------------------------------------------------------
      [^"]*                    any character except: '"' (0 or more
                               times (matching the most amount
                               possible))
----------------------------------------------------------------------
      "                        '"'
----------------------------------------------------------------------
     |                        OR
----------------------------------------------------------------------
      [^'"\s]*                 any character except: ''', '"',
                               whitespace (\n, \r, \t, \f, and " ")
                               (0 or more times (matching the most
                               amount possible))
----------------------------------------------------------------------
    )                        end of grouping
----------------------------------------------------------------------
  )*                       end of grouping
----------------------------------------------------------------------
  \s?                      whitespace (\n, \r, \t, \f, and " ")
                           (optional (matching the most amount
                           possible))
----------------------------------------------------------------------
  \/?                      '/' (optional (matching the most amount
                           possible))
----------------------------------------------------------------------
  >                        '>'
----------------------------------------------------------------------