gpt4 book ai didi

javascript - 查找文档中的某些文本并将其替换为相应的 HTML 文本

转载 作者:行者123 更新时间:2023-11-28 11:00:37 25 4
gpt4 key购买 nike

我正在尝试使用 JavaScript 扫描文档,并将所有出现的 [x] 替换为其 HTML 对应项,例如 [x] ,其中 x 是数字。这是我到目前为止所拥有的,它确实在目标文本周围添加了标签,但作为 HTML 实体,而不是实际的 HTML:

function walkText(node) {
if (node.nodeType == 3) {
node.data = node.data.replace(/\[(\d+)\]/g, '<b>[$1]</b>');
}
if (node.nodeType == 1 && node.nodeName != "SCRIPT") {
for (var i = 0; i < node.childNodes.length; i++) {
walkText(node.childNodes[i]);
}
}
}
walkText(document.body);

最终结果只是文本 包裹在文本周围,而不是实际将其加粗。有谁知道一种有效的方法来实际搜索长文档中的某些文本并实际用 HTML 替换目标文本?

最佳答案

TextNode 对象仅包含文本内容,没有任何 HTML 或 XML 标记。因此更换它们并不像人们第一次看到的那么容易。

function walkText(node) {
// if (node.nodeType == 3) {
if (node instanceof Text) {
if (!node.data.trim().length) {
return;
}
// parentheses would reserve the splitters
const parts = node.data.split(/(\d+)/).filter(Boolean);
if (parts.length < 2) {
return;
}

//
// ─── Method 1. WRAP WITH SPAN ───────────────────────────────────────────
//
const span = document.createElement('span');
span.innerHTML = parts
.map(item => {
// simple check again
return /\d/.test(item) ? `<b>${item}</b>` : item;
})
.join('');
node.parentNode.replaceChild(span, node);

//
// ─── METHOD 2. WITHOUT SPAN ──────────────────────────────────────
//
// const frag = document.createDocumentFragment();
// parts
// .map(item => {
// if (/\d+/.test(item)) {
// const b = document.createElement('b');
// b.innerText = item;
// return b;
// } else {
// return document.createTextNode(item);
// }
// })
// .forEach(item => {
// frag.appendChild(item);
// });
// node.parentNode.replaceChild(frag, node);
}
if (node.nodeType == 1 && node.nodeName != 'SCRIPT') {
for (var i = 0; i < node.childNodes.length; i++) {
walkText(node.childNodes[i]);
}
}
}
walkText(document.body);
<div>
hello 113 world at 3
</div>

关于javascript - 查找文档中的某些文本并将其替换为相应的 HTML 文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55603832/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com