JSON和HTML之间互转实现

  • 主要实现功能html转json,再由json恢复html
  • 可去除 stylescript 标签
  • 将行内样式转换为 js object
  • class 转换为数组形式
  • 主要依赖于 htmlparser2 ; 这是一个性能优越、功能强大的 html 解析库

htmlparser2 Performance.png

直接上代码

import { Parser } from "htmlparser2"

const numberValueRegexp = /^\d+$/
const zeroValueRegexp = /^0[^0\s].*$/
const scriptRegexp = /^script$/i
const styleRegexp = /^style$/i
const selfCloseTagRegexp = /^(meta|base|br|img|input|col|frame|link|area|param|embed|keygen|source)$/i

const TAG = 'tag'
const TEXT = 'text'
const COMMENT = 'comment'

/**
 * 去除前后空格
 */
export const trim = val => {
    return (val || '').replace(/^\s+/, '').replace(/\s+$/, '')
}
/**
 * 首字母大写
 */
export const capitalize = word => {
    return (word || '').replace(/( |^)[a-z]/, c => c.toUpperCase())
}
/**
 * 驼峰命名法/小驼峰命名法, 首字母小写
 */
export const camelCase = key => {
    return (key || '').split(/[_-]/).map((item, i) => i === 0 ? item : capitalize(item)).join('')
}
/**
 * 大驼峰命名法,首字母大写
 */
export const pascalCase = key => {
    return (key || '').split(/[_-]/).map(capitalize).join('')
}
export const isPlainObject = obj => {
    return Object.prototype.toString.call(obj) === '[object Object]'
}
/**
 * 行内样式转Object
 */
export const style2Object = (style) => {
    if (!style || typeof style !== 'string') {
        return {}
    }
    const styleObject = {}
    const styles = style.split(/;/)
    styles.forEach(item => {
        const [prop, value] = item.split(/:/)
        if (prop && value && trim(value)) {
            const val = trim(value)
            styleObject[camelCase(trim(prop))] = zeroValueRegexp.test(val) ? 0 : numberValueRegexp.test(val) ? Number(val) : val
        }
    })
    return styleObject
}

export const toJSON = (html, options) => {
    options = Object.assign({ skipStyle: false, skipScript: false, pureClass: false, pureComment: false }, options)
    const json = []
    let levelNodes = []
    const parser = new Parser({
        onopentag: (name, { style, class: classNames, ...attrs } = {}) => {
            let node = {}
            if ((scriptRegexp.test(name) && options.skipScript === true) ||
                (styleRegexp.test(name) && options.skipStyle === true)) {
                node = false
            } else {
                if (options.pureClass === true) {
                    classNames = ''
                }
                node = {
                    type: TAG,
                    tagName: name,
                    style: style2Object(style),
                    inlineStyle: style || '',
                    attrs: { ...attrs },
                    classNames: classNames || '',
                    classList: options.pureClass ? [] : (classNames || '').split(/\s+/).map(trim).filter(Boolean),
                    children: []

                }
            }
            if (levelNodes[0]) {
                if (node !== false) {
                    const parent = levelNodes[0]
                    parent.children.push(node)
                }
                levelNodes.unshift(node)
            } else {
                if (node !== false) {
                    json.push(node)
                }
                levelNodes.push(node)
            }
        },
        ontext(text) {
            const parent = levelNodes[0]
            if (parent === false) {
                return
            }
            const node = {
                type: TEXT,
                content: text
            }
            if (!parent) {
                json.push(node)
            } else {
                if (!parent.children) {
                    parent.children = []
                }
                parent.children.push(node)
            }
        },
        oncomment(comments) {
            if (options.pureComment) {
                return
            }
            const parent = levelNodes[0]
            if (parent === false) {
                return
            }
            const node = {
                type: COMMENT,
                content: comments
            }
            if (!parent) {
                json.push(node)
            } else {
                if (!parent.children) {
                    parent.children = []
                }
                parent.children.push(node)
            }
        },
        onclosetag() {
            levelNodes.shift()
        },
        onend() {
            levelNodes = null
        }
    })
    parser.done(html)
    return json
}
const setAttrs = (attrs, results) => {
    Object.keys(attrs || {}).forEach(k => {
        if (!attrs[k]) {
            results.push(k)
        } else {
            results.push(' ', k, '=', '"', attrs[k], '"')
        }
    })
}
const toElement = (elementInfo, results) => {

    switch (elementInfo.type) {
        case TAG:
            const tagName = elementInfo.tagName
            results.push('<', tagName)
            if (elementInfo.inlineStyle) {
                results.push(' style="', elementInfo.inlineStyle, '"')
            }
            if (elementInfo.classNames) {
                results.push(' class="', elementInfo.classNames, '"')
            }
            setAttrs(elementInfo.attrs, results)
            if (selfCloseTagRegexp.test(tagName)) {
                results.push(' />')
            } else {
                results.push('>')
                if (Array.isArray(elementInfo.children)) {
                    elementInfo.children.forEach(item => toElement(item, results))
                }
                results.push('</', tagName, '>')
            }
            break;
        case TEXT:
            results.push(elementInfo.content)
            break;
        case COMMENT:
            results.push("<!-- ", elementInfo.content, " -->")
            break;
        default:
        // ignore
    }
}
export const toHTML = json => {
    json = json || []
    if (isPlainObject(json)) {
        json = [json]
    }
    const results = []
    json.forEach(item => toElement(item, results))
    return results.join('')
}

示例

const source = '<div class="test1" style="color:red">测试1</div> <div class="test1" style="color:red">测试2</div>'
const htmljson = toJSON(source, { skipScript: true, skipStyle: true, pureClass: true, pureComment: true })
const jsonhtml = toHTML(htmljson)
console.log(htmljson)
console.log(jsonhtml)

参数说明

  • skipScript 过滤 script 标签,默认 false
  • skipStyle 过滤 style 标签,默认 false
  • pureClass 去掉 class 属性,默认 false
  • pureComment 去掉注释,默认 false

备注

  • htmlparser2 通过 npm i htmlparser2 --save 进行安装即可

作者: 浪子
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 浪子 !
 上一篇
flexmark-java markdown给链接添加target属性 flexmark-java markdown给链接添加target属性
flexmark-java 是 java 版的 Markdown 转换工具,基本支持 Markdown 所有的语法,而且扩展性也不错;本文主要是通过扩展形式给链接添加 target 属性 本文的扩展还将支持 Spring Properties 来动态配置, 支持域名排除、支持相对路径排除、支持自定义 target 属性的值. 定义 Properties 配置类 LinkTargetPropert
2020年5月2日
下一篇 
将css转换为行内样式的方案css-inline 将css转换为行内样式的方案css-inline
聊聊场景 发送邮件 在第三方网站中嵌入HTML 从其他编辑器拷贝编辑好的文章发布到微信、今日头条等自媒体 在以上场景使用行内样式的兼容性要高很多,也可以保持原样式不变 解决方案 juice inline-css 这两种方案功能和 Api 非常相似,这里就以 juice 为例 安装 npm i juice --save 使用 import juice from 'juice' const html
2020年5月14日