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

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

示例文本

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

<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))
----------------------------------------------------------------------
  >                        '>'
----------------------------------------------------------------------