Question

我有以下由第三方自动生成的html文档：

<body>
<pre>
<b>Field1</b> something 
<b>Field2</b> something else
...
</pre>
</body>

在某些情况下，我最终要突出显示加粗的文字之后的文字，因此我选择使用滑脂。由于该文本没有任何关联的ID，因此我正在考虑重新创建页面，并且在</b>和<b>之间，我将用标记标记将所有文本括起来，而ID为之前的字段，例如：

<body>
<pre>
<b>Field1</b> <mark id=Field1>something </mark>
<b>Field2</b> <mark id=Field2>something else </mark>
...
</pre>
</body>

是否有一种无需重新创建页面即可轻松实现的方法？例如在每个标签之后插入元素？

Answer 1

使用纯JS，您可以选择所有b节点，在其上循环，然后在每次迭代中，将兄弟文本节点替换为新的mark节点。

检查以下工作示例：

document.querySelectorAll('b').forEach(b => {
  let textNode = b.nextSibling;
  let newNode = document.createElement('mark');
  newNode.id = b.innerText;
  newNode.innerHTML = textNode.textContent;
  textNode.replaceWith(newNode);
})

<pre>
<b>Field1</b> something 
<b>Field2</b> something else
</pre>

Answer 2

如果在该特定页面上没有其他粗体元素，并且假设您使用的是文本编辑器，则可以执行“替换”（在Sublime Text和VS中为Ctrl + h），在替换部分中，放回结束标记，并添加其他编辑“ <<元素，DIV，类，ID等>”，然后单击全部替换。

向标签内的文本添加标签

2 个答案: