在html和React中为文本着色

用手将标记添加到文本很容易。您可以在Habré上在此处标记文本,然后将其复制到站点。您可以在记事本++或Atom中进行替换搜索。

如果是1个文本。如果文本很多,我想要一个工具来提取带有html标签的文本片段或生成React的源代码。在Python上,这并不困难(每种颜色几行代码)。



如果您知道Python和正则表达式,请单击链接。

有示例和源代码。在katom下有详细的描述。

文本标记,例如为Javascript源代码着色


考虑以下功能:

def jsToHtml(s):

在输入处,源文本返回html。

我们设置定义块属性的变量。在此示例中,使用样式是为了清楚起见,将来将其替换为类更合乎逻辑。

comm = 'style="color: red;"' #   
blue = 'style="color: blue;"' # 
...

标记。

首先要做的是转义字符“&”,“ <”,“>”

s = s.replace('&', '&amp;').replace('<', '&lt;').replace('>', '&gt;')

对“&”进行转义以显示字母组合“&lt;”,“&gt;” 和其他“&...;”,

转义字符“ <”和“>”,以免与标签冲突。

您可以屏蔽很多东西,但是我认为在utf-8中就足够了。

标记算法:

  • 我们使用一个重新模板,并查找满足它的所有文本片段。
  • 我们切出每个片段,在其中添加标记,然后将标记的片段保存在数组中(同时保存原始文本:它将派上用场)。
  • 在其位置插入带有数字的存根。
  • 因此,对于每种颜色。
  • 涂完所有内容后,将存根替换为阵列中的彩色片段。

存根应该是唯一的,但是在我们的文本中没有单个字符“ <”和单个“>”。

制作存根:

f'<{i}>'

我是存根编号。文本中绝对没有这样的东西。

如果片段中已经有存根,该怎么办。

例如,在源文本中有以下几行:

`  :   /*     */ `
/* , `     ` */

选项2:

  1. 忽视。在这种情况下,字符串将具有双色。
  2. 查找嵌套的存根并将其替换为原始(未标记)文本。

我们创建一个实现所有这些功能的函数(10行代码,10行注释):

def oneRe(reStr, s, attr, ls, multiColor=False):
    '''
        s  ,          ls,
           (<0>, <1> ...<1528>...).
          .
    
    reStr - re
    s - 
    attr -  style/class/etc
    ls -   
    multiColor=False,     
    '''
    for block in set(re.findall(reStr, s)):
        toArr = block
        if not multiColor: #  multiColor==False,   
            for prev in set(re.findall(r'<[\d]+>', block)): #  : <0> ... <21>
                iPrev = int(prev[1:-1], 10)                #     
                toArr = toArr.replace(prev, ls[iPrev][1])  #   '<0> qwe <21>'  (<0>,<21>)  . 
        ls.append([f'<span {attr}>{toArr}</span>', toArr]) #     ls 2 :     
        s = s.replace(block, f'<{len(ls)-1}>')
    return s

这是一个演示:正则表达式的标记可能不正确,转义字符(\” \“)不被处理。

参考:表达:

s = s.replace(/A + B/g, 'A - B');

记事本++和Atom编辑器具有不同的颜色。

现在有了oneRe,着色片段就可以简单完成了。一个示例,用撇号和引号为线条着色:

s = oneRe(r"'[\s\S]*?'", s, green, ls, multiColor=False) #    ''   ls
s = oneRe(r'"[\s\S]*?"', s, green, ls, multiColor=False) #    ""   ls

一个更复杂的着色的例子。需要js在多行中为表达式着色
`    ${A + B}  ${A - B}`


for mStr in set(re.findall(r'`[\s\S]+?`', s)): #    
    newFstr = mStr
    for val in set(re.findall(r"\$\{[\s\S]+?\}", mStr)):
        ls.append([f'<span {darkRed}>{val}</span>', val])
        newFstr = newFstr.replace(val, f'<{i}>')
        i += 1
    s = s.replace(mStr, newFstr)
    
s = oneRe(r'`[\s\S]+?`', s, green, ls, multiColor=True) #    ``   ls

首先我们找到多个

字符串re.findall(r`` [\ s \ S] +?'',s)返回反引号字符之间的文本块列表。

每个块包含空格或非空格([\ s \ S],即任何内容)。

块长度为1或更大(+)。

没有贪婪(“?”表示在该块内没有符号“`”)。

将找到的块(mStr变量复制newFstr变量
我们在块子块中找到表达式$ {...}。

re.findall(r“ \ $ \ {[\ s \ S] *?\}”,mStr)返回此类子块的列表。我们将标记保存在ls数组中,并将子块替换为newFstr变量中的存根
当子块用完时,替换为原始字符串s将原始块的值更改为new。

设置不是多余的。如果findall返回几个相同的块,则在处理源代码中的第一个块时,所有相同的块将立即替换为存根。处理第二个相同的块时,它将不再位于源文本中。Set删除重复项。

JsToHtml.py文件
# -*- coding: utf-8 -*- 
'''
AON 2020

'''

import re

# *** *** ***

def oneRe(reStr, s, attr, ls, multiColor=False):
    '''
        s  ,          ls,
           (<0>, <1> ...<1528>...).
          .
    
    reStr - re
    s - 
    attr -  style/class/etc
    ls -   
    multiColor=False,     
    '''
    i = len(ls) #   
    for block in set(re.findall(reStr, s)):
        toArr = block
        if not multiColor: #  multiColor==False,   
            for prev in set(re.findall(r'<[\d]+>', block)): #  : <0> ... <21>
                iPrev = int(prev[1:-1], 10)                 #     
                toArr = toArr.replace(prev, ls[iPrev][1])   #   '<0> qwe <21>'  (<0>,<21>)  . 
        ls.append([f'<span {attr}>{toArr}</span>', toArr])  #     ls 2 :     
        s = s.replace(block, f'<{i}>')              #       
        i += 1
    return s

# *** *** ***

def operColor(s, ls, color):
    '''
     .
      ,       ,  
    '''
    i = len(ls)
    for c in ['&lt;=', '&gt;=', '=&lt;', '=&gt;', '&lt;', '&gt;', '&amp;&amp;', '&amp;',
              '===', '!==', '==', '!=', '+=', '-=', '++', '--', '||']:
        ls.append([f'<span {color}>{c}</span>',0])
        s = s.replace(c, f'<{i}>')
        i += 1
    for c in '!|=+-?:,.[](){}%*/':
        ls.append([f'<span {color}>{c}</span>',0])
        s = s.replace(c, f'<{i}>')
        i += 1
    return s

# *** *** ***

def jsToHtml(s):
    '''
      .
     ,        <span>.
    '''

    black = '''style="font-family: 'Courier New', monospace;
        background: #fff; 
        color: black;
        font-weight: bold;
        border: 1px solid #ddd;
        padding: 5px;
        text-align: left;
        white-space: pre;"'''
    comm = 'style="color: red;"'
    green = 'style="color: green; font-style: italic;"'
    blue = 'style="color: blue;"'
    red2 = 'style="color: #840;"'

    s = s.replace('&', '&amp;').replace('<', &'&lt;').replace('>', '&gt;')   #   '&', '<', '>'

    ls = []

    i = 0
    for mStr in set(re.findall(r'`[\s\S]+?`', s)): #    
        newFstr = mStr
        for val in set(re.findall(r"\$\{[\s\S]+?\}", mStr)):
            ls.append([f'<span {darkRed}>{val}</span>', val])
            newFstr =newFstr.replace(val, f'<{i}>')
            i += 1
        s = s.replace(mStr, newFstr)
        
    s = oneRe(r'`[\s\S]+?`', s, green, ls, multiColor=True) #    ``   ls
    s = oneRe(r"'[\s\S]*?'", s, green, ls, multiColor=False) #    ''   ls
    s = oneRe(r'"[\s\S]*?"', s, green, ls, multiColor=False) #    ""   ls
    s = oneRe(r'/[\s\S].*?/g\b', s, green, ls, multiColor=False) #    re-   ls
    s = oneRe(r'/[\s\S].*?/\.', s, green, ls, multiColor=False) #    re-   ls
    s = oneRe(r'/\*[\s\S]+?\*/', s, comm, ls, multiColor=False) #    /*  */   ls (  - )
    s = oneRe(r'//[\s\S]*?\n', s, comm, ls, multiColor=False) #    //    ls (  - )

    i = len(ls)

    #    
    for c in ['new', 'JSON', 'Promise', 'then', 'catch', 'let', 'const', 'var', 'true', 'false', 'class', 'from', 'import', 'set', 'list', 'for', 'in', 'if', 'else', 'return', 'null']:
        ls.append([f'<span {blue}>{c}</span>',0])
        s = re.sub (r'\b%s\b' % c, f'<{i}>', s)
        i += 1

    #     
    for c in ['window', 'doc', 'cmd', 'init','init2', 'recalc', 'hide', 'readOnly', 'validate']:
        ls.append([f'<span {darkRed}>{c}</span>',0])
        s = re.sub (r'\b%s\b' % c, f'<{i}>', s)
        i += 1

    s = operColor(s, ls, darkBlue) #    

    for j in range(len(ls), 0, -1):  #  , , ,    
        s = s.replace(f'<{j-1}>', ls[j-1][0])

    return f'<div {black}>{s}</div>'

# *** *** ***


HTML在React


htmltoreact.com上将 html转换为React源代码还有一个指向GitHub的链接。

这不适合我:首先,它不能完全满足我的需要,其次,我将如何把这个奇迹拖到我的服务器上。

我写了我自己的。

安装lxml库(pip安装lxml或pip3安装lxml)。

我们导入:

from xml.dom.minidom import parseString
from lxml import html, etree

将html文本转换为xhtml文本。几乎是同一回事,但是所有标签都是封闭的。

doc = html.fromstring(htmlText)
ht = etree.tostring(doc, encoding='utf-8').decode()

生成的xhtml parsim使用迷你房子到树屋。

dom = parseString(ht)

我们创建一个函数,以递归方式跳过节点并以React源代码的形式生成结果。

调用parseString之后,dom树是一个具有子节点的父亲节点,该子节点具有子节点,等等。

每个节点都是一个包含其描述的字典:

  • nodeName-节点名称,字符串
  • childNodes-子节点,列表
  • 属性-属性,字典
  • 名为#text的节点具有nodeValue(字符串)

例:

<div class="A" style="color: red;">Red of course,<br> </div>

转换后,我们得到:
{ 'nodeName':'div',
  'attributes': {'style': 'color: red;', 'class': 'A'},
  'childNodes': [
    {'nodeName':'#text', 'nodeValue': 'Red of course,'},
    {'nodeName':'br'},
    {'nodeName':'#text', 'nodeValue': ''},
  ],
}

将dom转换为字符串很容易(有一个pprint),在生成React代码时,我用className替换了该类,并重命名了style属性。

在文本节点中,'{','}','<','>'被转义。

HtmlToReact.py文件
# -*- coding: utf-8 -*- 
# -*- coding: utf-8 -*- 

from xml.dom.minidom import parseString
from lxml import html, etree

# *** *** ***

_react = ''

def htmlToReact(buf):
    '''
    buf - html-
     ReactJS- 
    '''
    global _react
    _react = ''

    try:
        r = re.search('<[\\s\\S]+>', buf)
        if r:
            doc = html.fromstring(r.group(0))
            ht = etree.tostring(doc, encoding='utf-8').decode()
            xHtmlToReact(parseString(ht).childNodes[0], '')
            return _react
        else:
            return '<empty/>'
    except Exception as ex:
        s = f'htmlToReact: \n{ex}'
        print(s)
        return s

# *** *** ***

def sU(a, c):
    '''
    xlink:show   ->  xlinkShow
    font-weight  ->  fontWeight
    '''
    l, _, r = a.partition(c)
    return ( (l + r[0].upper() + r[1:]) if r else a).strip()

# *** *** ***

def xHtmlToReact(n, shift='\n    '):
    '''
       -
      ,        upperCase
       global  _react
    '''
    global _react

    if n.nodeName.lower() in ['head', 'script']:
        return
    
    _react += shift + '<' + n.nodeName.lower()
    if n.attributes:
        for k, v in n.attributes.items():
            if k == 'style':
                style = ''
                for s in v.split(';'):
                    if s.strip():
                        l, _, r = s.partition(':')
                        style += f'''{sU(l, '-')}: "{r.strip()}", '''
                if style:
                    _react += ' style={{' + style + '}}'
            elif k == 'class':
                _react += f' className="{v}"'
            else:
                kk = k.replace('xlink:href', 'href') # deprcated
                _react += f''' {sU( sU(kk, ':'), '-' )}="{v}"'''
        
    _react += '>'
    if n.childNodes:
        for child in n.childNodes:
            if  child.nodeName == '#text':
                tx = child.nodeValue
                for x in ['{', '}', '<', '>']:
                    tx = tx.replace(x, '{"' + x + '"_{_')
                tx = tx.replace('_{_', '}')
                if tx[-1] == ' ':
                    tx = tx[:-1] + '\xa0'
                _react += tx.replace('\n', '<br/>')
            else:
                xHtmlToReact(child)
                
    _react += f'{shift}</{n.nodeName.lower()}>'

# *** *** ***



示例和源代码在这里。

PS在Habré上,Python代码(可能还有其他)的着色并不理想。如果python字符串具有字符串&;,它显示为在我的代码中,我进行了调整以使其看起来正确。如果Habr改正了一个错误,我的文字将互相交叉。

All Articles