1

我正在编写一个 Greasemonkey 脚本，其中在一个地方我将文本中的所有空格转换为<br>，以便字符串在表格中的单元格中显得更加垂直。

我匹配的 HTML 是：

<span>
    <img class="icon itemicon" alt="Manual item" ...etc...>
    Chapter 2 reading
    <a title="Sort in descending order" href="index.php....."> etc </a>
</span>

这是我的代码：

var child = spanelm.firstChild;
var textChild = child.nextSibling;
textChild.textContent = textChild.textContent.replace(/ /g, "<br>");


我的 Greasemonkey 脚本找到了正确的元素并成功进行了更改，但在网页上我看到了<br>字面上的标签：

Chapter<br>2<br>reading


（在我的代码的另一个地方，我正在做类似的事情，这似乎有效：

spanelm.firstChild.innerHTML = spanelm.firstChild.text.replace(/ /g, "<br>");

但我无法在这种情况下使用这种 HTML 组织。）

我觉得我需要告诉 Greasemonkey eval()HTML 什么的......

4

1 回答 1

1

文本节点没有innerHTML，因此您不能以这种方式插入新标签。（你应该非常小心使用这种字符串替换任何节点innerHTML——代码丢弃嵌套元素、内联 JS、附加事件处理程序等只是时间问题）

要在文本元素中插入标签，您需要将该元素分解为新的文本元素，并穿插您想要的标签。在这种情况下，用 a 替换每次运行的空格<br>将使用如下代码：

（在 jsFiddle 上查看它的实际效果。）

var precedingNode   = document.querySelector ("span > img.icon.itemicon");
var node            = precedingNode.nextSibling;
var words           = node.textContent.split (/ +/);
var parent          = node.parentNode;

for (var J = 0, numWords = words.length;  J < numWords;  ++J) {
    var newWord     = document.createTextNode (words[J]);
    var newBreak    = document.createElement ("br");
    parent.insertBefore (newWord,  node);
    parent.insertBefore (newBreak, node);
}
parent.removeChild (node);
于 2012-05-20T12:08:15.243 回答