1

私は Greasemonkey スクリプトを書いています。このスクリプトでは、テキスト内のすべてのスペースを 1 つの場所に変換して<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 スクリプトは適切な要素を見つけて変更を正常に行っていますが、Web ページには<br>タグが文字通り表示されます。

Chapter<br>2<br>reading


(私のコードの別の場所で、同様のことを行っていますが、うまくいくようです:

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

しかし、この場合、この HTML の構成ではそれを機能させることができません。)

eval()HTMLか何かにGreasemonkeyを伝える必要があるような気がします...

4

1 に答える 1

1

テキスト ノードには がないinnerHTMLため、そのように新しいタグを挿入することはできません。(使用しているノードのこの種の文字列置換には細心の注意をinnerHTML払う必要があります。コードがネストされた要素、インライン JS、添付されたイベント ハンドラーなどを破棄するのは時間の問題です。)

テキスト要素にタグを挿入するには、その要素を新しいテキスト要素に分割し、必要なタグを挿入する必要があります。この場合、一連のスペースを に置き換えると、次の<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 に答える