Question

我正在编写一个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或其他东西......

Answer 1

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

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

（See it in action at 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);

如何在文本节点中将空格更改为？

1 个答案: