ReactJS：删除除了Contenteditable div中的某些特定标记之外的所有html ags

Question

我有一个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标签

Answer 1

描述

<\/?(?!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))
----------------------------------------------------------------------
  >                        '>'
----------------------------------------------------------------------