• 请不要在回答技术问题时复制粘贴 AI 生成的内容
MissSixty
V2EX  ›  程序员

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

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

    正则:只要特征明显,正则替换就容易 且 准确;特征不明显 容易搞砸 且 不容易调试发现错误
    bgm004
    bgm004
    Jan 14, 2023 via Android
    22
    推荐 10 楼的方法
    iOCZ
    iOCZ
    Jan 14, 2023
    23
    源头修改
    PlG5sBkXD1ziLeGB
    PlG5sBkXD1ziLeGB
    Jan 14, 2023 via iPhone
    24
    看起来像是打印表单,其实这种后端返回数据,前端生成表单更简单一点
    zhuangpipi
    zhuangpipi
    Jan 14, 2023
    25
    html to ast ,修改完再 generate 成 html
    cpstar
    cpstar
    Jan 14, 2023
    26
    赞同 20#,提了这个建议不行,那个建议也不行,那不就是既要又要。所有的方法都是有优有劣的,只看劣势不看优势,那没有万全之策。
    MissSixty
    MissSixty
    OP
    Jan 14, 2023
    27
    这个需求目的是后端返回 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
    webcape233
    Jan 15, 2023 via iPhone
    28
    考虑下 css 直接加样式吧
    duan602728596
    duan602728596
    Jan 15, 2023❤️1
    29
    虽然都说 js 操作 dom 的性能差,但是还没有差到操作几个 div 就被人说性能开销太大了的程度。
    izoabr
    izoabr
    Jan 15, 2023
    30
    后端给的内容能协商不?让加个 id 或者 class 呗
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Privacy   ·   Solana   ·   936 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 62ms · UTC 21:52 · PVG 05:52 · LAX 13:52 · JFK 16:52
    ♥ Do have faith in what you're doing.