js 编辑 HTML 字符串，有推荐的方法吗？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

• 请不要在回答技术问题时复制粘贴 AI 生成的内容

这是一个创建于 697 天前的主题，其中的信息可能已经有所发展或是发生改变。

后端返回 html 网页的字符串，我需要将字符串里添加一段固定的<div>标签和给字符串里 table 添加属性 border='1'。
大佬们有什么推荐的方法或者库吗？

字符

HTML

添加

div

30 条回复 • 2023-01-15 21:30:17 +08:00

tutou

2023-01-14 14:56:05 +08:00

你添加一段 js ，直接改 dom 不就行了

fason1995

2023-01-14 15:04:28 +08:00

先把 html 字符串 innerHTML 到 dom 中，然后选择 dom ，添加属性就好了

MissSixty

2023-01-14 15:07:04 +08:00

@tutou
@fason1995
这种方法不太好，性能开销太大了。

lukaz

2023-01-14 15:08:11 +08:00 via iPhone

可以考虑用正则匹配替换

DrugsZ

2023-01-14 15:09:37 +08:00

直接把<table 替换成 <table border="1"

gydi

2023-01-14 15:11:24 +08:00

正则或者 DOMParser

fox0001

2023-01-14 15:12:07 +08:00 via Android

@tutou #1 我也推荐这个做法。在该 HTML 末尾加段<script>，该 HTML 加载完就会自行 js 并做修改。至于 js ，可以用 dom 的相关方法，不用替换字符串那么麻烦。

MissSixty

2023-01-14 15:26:56 +08:00

@lukaz
@DrugsZ
@gydi
正则局限性太大，字符串插入 div 容易出错

learningman

2023-01-14 15:29:11 +08:00

@MissSixty #8 容易出错就 DomParser 啊，楼上不是有人说过了吗

lanced

2023-01-14 16:06:32 +08:00

可以看一下 DocumentFragment ，创建并组成一个 DOM 子树，再用 2 楼的方法去修改，再插入 Document ，只触发一次重渲染

molvqingtai

2023-01-14 16:09:38 +08:00 via Android

@lukaz 不要误导人，能精确匹配 html 的正则还没有写出来

AyaseEri

2023-01-14 16:21:15 +08:00

让后端在 html 里给你留两个槽，你直接 replace

mango111

2023-01-14 16:21:52 +08:00

之前用过一个库 cheerio https://www.npmjs.com/package/cheerio
可以解析 html 字符串，用类 jQuery 方式修改 dom 并输出新字符串

codehz

2023-01-14 16:49:11 +08:00 via iPhone

table 的 border 真的需要改 html 吗（ css 不可以吗

humbass

2023-01-14 16:58:45 +08:00

String.replace 支持正则，基础还是需要敲打的

lzgshsj

2023-01-14 17:01:09 +08:00

cheerio+1

lneoi

2023-01-14 17:15:37 +08:00

htmlparser2 找个类似的解析库操作一下

renmu

2023-01-14 17:21:27 +08:00 via Android

改 dom 性能差，那我想知道你们是怎么做交互的

MissSixty

2023-01-14 17:42:50 +08:00

@renmu 不交互，后端返回 html ，前端增加点 dom ，然后调用浏览器打印

darkengine

2023-01-14 17:43:08 +08:00

建议先考虑怎么实现，再考虑性能问题，不要提前优化。

xiangyuecn

2023-01-14 17:49:14 +08:00

#12 的也许才是跨语言并且简单的实现，其他的解析要么太重量级了

正则：只要特征明显，正则替换就容易且准确；特征不明显容易搞砸且不容易调试发现错误

Track13

2023-01-14 18:43:55 +08:00 via Android

推荐 10 楼的方法

iOCZ

2023-01-14 18:58:52 +08:00

源头修改

yyf1234

2023-01-14 19:44:06 +08:00 via iPhone

看起来像是打印表单，其实这种后端返回数据，前端生成表单更简单一点

zhuangpipi

2023-01-14 19:45:14 +08:00

html to ast ，修改完再 generate 成 html

cpstar

2023-01-14 20:29:02 +08:00

赞同 20#，提了这个建议不行，那个建议也不行，那不就是既要又要。所有的方法都是有优有劣的，只看劣势不看优势，那没有万全之策。

MissSixty

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

2023-01-15 09:31:35 +08:00 via iPhone

考虑下 css 直接加样式吧

duan602728596

2023-01-15 09:35:53 +08:00

虽然都说 js 操作 dom 的性能差，但是还没有差到操作几个 div 就被人说性能开销太大了的程度。

izoabr

2023-01-15 21:30:17 +08:00

后端给的内容能协商不？让加个 id 或者 class 呗