V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
MissSixty
V2EX  ›  程序员

js 编辑 HTML 字符串,有推荐的方法吗?

  •  
  •   MissSixty · 2023-01-14 14:48:41 +08:00 · 2483 次点击
    这是一个创建于 519 天前的主题,其中的信息可能已经有所发展或是发生改变。
    后端返回 html 网页的字符串,我需要将字符串里添加一段固定的<div>标签和给字符串里 table 添加属性 border='1'。
    大佬们有什么推荐的方法或者库吗?
    30 条回复    2023-01-15 21:30:17 +08:00
    tutou
        1
    tutou  
       2023-01-14 14:56:05 +08:00
    你添加一段 js ,直接改 dom 不就行了
    fason1995
        2
    fason1995  
       2023-01-14 15:04:28 +08:00
    先把 html 字符串 innerHTML 到 dom 中,然后选择 dom ,添加属性就好了
    MissSixty
        3
    MissSixty  
    OP
       2023-01-14 15:07:04 +08:00
    @tutou
    @fason1995
    这种方法不太好,性能开销太大了。
    lukaz
        4
    lukaz  
       2023-01-14 15:08:11 +08:00 via iPhone
    可以考虑用正则匹配替换
    DrugsZ
        5
    DrugsZ  
       2023-01-14 15:09:37 +08:00
    直接把<table 替换成 <table border="1"
    gydi
        6
    gydi  
       2023-01-14 15:11:24 +08:00   ❤️ 1
    正则或者 DOMParser
    fox0001
        7
    fox0001  
       2023-01-14 15:12:07 +08:00 via Android
    @tutou #1 我也推荐这个做法。在该 HTML 末尾加段<script>,该 HTML 加载完就会自行 js 并做修改。至于 js ,可以用 dom 的相关方法,不用替换字符串那么麻烦。
    MissSixty
        8
    MissSixty  
    OP
       2023-01-14 15:26:56 +08:00
    @lukaz
    @DrugsZ
    @gydi
    正则局限性太大,字符串插入 div 容易出错
    learningman
        9
    learningman  
       2023-01-14 15:29:11 +08:00
    @MissSixty #8 容易出错就 DomParser 啊,楼上不是有人说过了吗
    lanced
        10
    lanced  
       2023-01-14 16:06:32 +08:00
    可以看一下 DocumentFragment ,创建并组成一个 DOM 子树,再用 2 楼的方法去修改,再插入 Document ,只触发一次重渲染
    molvqingtai
        11
    molvqingtai  
       2023-01-14 16:09:38 +08:00 via Android
    @lukaz 不要误导人,能精确匹配 html 的正则还没有写出来
    AyaseEri
        12
    AyaseEri  
       2023-01-14 16:21:15 +08:00   ❤️ 2
    让后端在 html 里给你留两个槽,你直接 replace
    mango111
        13
    mango111  
       2023-01-14 16:21:52 +08:00
    之前用过一个库 cheerio https://www.npmjs.com/package/cheerio
    可以解析 html 字符串,用类 jQuery 方式修改 dom 并输出新字符串
    codehz
        14
    codehz  
       2023-01-14 16:49:11 +08:00 via iPhone
    table 的 border 真的需要改 html 吗( css 不可以吗
    humbass
        15
    humbass  
       2023-01-14 16:58:45 +08:00
    String.replace 支持正则,基础还是需要敲打的
    lzgshsj
        16
    lzgshsj  
       2023-01-14 17:01:09 +08:00
    cheerio+1
    lneoi
        17
    lneoi  
       2023-01-14 17:15:37 +08:00
    htmlparser2 找个类似的解析库操作一下
    renmu
        18
    renmu  
       2023-01-14 17:21:27 +08:00 via Android
    改 dom 性能差,那我想知道你们是怎么做交互的
    MissSixty
        19
    MissSixty  
    OP
       2023-01-14 17:42:50 +08:00
    @renmu 不交互,后端返回 html ,前端增加点 dom ,然后调用浏览器打印
    darkengine
        20
    darkengine  
       2023-01-14 17:43:08 +08:00   ❤️ 1
    建议先考虑怎么实现,再考虑性能问题,不要提前优化。
    xiangyuecn
        21
    xiangyuecn  
       2023-01-14 17:49:14 +08:00   ❤️ 1
    #12 的 也许才是跨语言并且简单的实现,其他的解析要么太重量级了

    正则:只要特征明显,正则替换就容易 且 准确;特征不明显 容易搞砸 且 不容易调试发现错误
    Track13
        22
    Track13  
       2023-01-14 18:43:55 +08:00 via Android
    推荐 10 楼的方法
    iOCZ
        23
    iOCZ  
       2023-01-14 18:58:52 +08:00
    源头修改
    yyf1234
        24
    yyf1234  
       2023-01-14 19:44:06 +08:00 via iPhone
    看起来像是打印表单,其实这种后端返回数据,前端生成表单更简单一点
    zhuangpipi
        25
    zhuangpipi  
       2023-01-14 19:45:14 +08:00
    html to ast ,修改完再 generate 成 html
    cpstar
        26
    cpstar  
       2023-01-14 20:29:02 +08:00
    赞同 20#,提了这个建议不行,那个建议也不行,那不就是既要又要。所有的方法都是有优有劣的,只看劣势不看优势,那没有万全之策。
    MissSixty
        27
    MissSixty  
    OP
       2023-01-14 20:29:26 +08:00
    这个需求目的是后端返回 html 字符串前端调用浏览器打印,打印前在字符串中插入特定内容<div>和改变字符串中 table 的样式,目前总结了几种方法。
    1 、在 HTML 末尾加段<script>,该 HTML 加载完就会自行 js 并做修改:这种行为有些危险,html 内容是用户随便写的。
    2 、后端在 html 里留两个槽,直接 replace:这就相当于把问题丢给了后端去解决,既然都能留槽了那直接让后端来做多好。留槽和插入 div 也没啥区别。
    3 、正则:改变 table 属性挺好用,但插入特定内容的 div 有不确定性,不敢保证写出的正则就那么强大。
    4 、document.implementation.createHTMLDocument():内存中创建空白网页,然后使用 documentElement.innerHTML 来存放内容,接着就使用常规 dom 操作。目前使用此方法。
    5 、innerHTML:此方法使用跟第 2 个类似,但它会自动去掉 html 、head 、body 标签,不是完整的网页了。
    6 、new DOMParser()​​:使用起来很简单,也是个能解决问题的方法,但综合考虑还是第 2 个好一些。
    webcape233
        28
    webcape233  
       2023-01-15 09:31:35 +08:00 via iPhone
    考虑下 css 直接加样式吧
    duan602728596
        29
    duan602728596  
       2023-01-15 09:35:53 +08:00   ❤️ 1
    虽然都说 js 操作 dom 的性能差,但是还没有差到操作几个 div 就被人说性能开销太大了的程度。
    izoabr
        30
    izoabr  
       2023-01-15 21:30:17 +08:00
    后端给的内容能协商不?让加个 id 或者 class 呗
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2428 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 29ms · UTC 11:57 · PVG 19:57 · LAX 04:57 · JFK 07:57
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.