如何在DOM元素的內容之前和之後插入空格？

如果我有如何在DOM元素的內容之前和之後插入空格？

<p>someword here</p> 
<span>another thing here</span> 
<div id="text">other thing here</div> 
<!-- any other html tags -->

如何插入內容的第一個和最後位置的空間？

我想要的結果是

<p> someword here </p> 
<span> another thing here </span> 
<div id="text"> other thing here </div> 
<!-- after tags like <p> and before </p> there have one space -->

來源

2011-09-21 cj333

元素裏面可以有元素嗎？ – harpo

頁面上的所有元素？ – Marshall

@馬歇爾，@harpo，是的。頁面上的所有元素，並且可能是其他元素內的元素。是否有快速的方法來REX'''和'<'到'/ \ w /'？ – cj333

如果你堅持使用JS +正則表達式來墊每元素的innerHTML，那麼你可以信息：

var 
    r = /(<[^>]+>)(.*)(<\/[^>]+>)/g, 
    func = function(str) { 
     return str.replace(r, function(original, a, b, c) { 
      return a + ' ' + (r.test(b) ? func(b) : b) + ' ' + c; 
     }); 
    }; 

func("<p name='somename'>someword here</p>"); 
// "<p name='somename'> someword here </p>" 

func("<div>I have things here<span>And more here<p>And even more here</p></span></div>"); 
// "<div> I have things here<span> And more here<p> And even more here </p> </span> </div>"

這只是爲了顯示你如何可以做到這一點，但我強烈推薦反對它。我提供的例子非常簡單。像一個普通的頁面（比如說，你正在看的那個頁面）有各種各樣的標籤。這將是非常詳盡的。並不是很明智。

來源

2011-09-21 18:37:45 Marshall

即使有您的反對意見，我覺得重新執行這一點很重要，這是一個非常糟糕的主意，而使用正則表達式來解析XML只是愚蠢的。 http://stackoverflow.com/questions/1732348/regex-match-open-tags-except-xhtml-self-contained-tags/1732454#1732454 – Incognito

是的我不知道爲什麼這是1）一個答案，2）接受的答案。更像'container.appendChild（document.createTextNode（'\ u00A0'））;'會更合適。（其中'\ u00A0'增加了一個不間斷的空格）......但是如果這就是OP所要求的，那很好。但是，世界上沒有其他人永遠都不會認爲這是一個可行的解決方案。 – dudewad

對於單個元素（如你似乎在問）：

element.html(' ' + element.html() + ' ')

對於每個頁面上的元素（如你的例子似乎表明），將其應用於每個元素。

來源

2011-09-21 17:58:48 yoozer8

@harpo，謝謝，有沒有一種快速的方法來使用'Rex'，因爲我想替換頁面中的所有標籤。 – cj333

使用jQuery *：

$('#id').html(' ' + $('#id').html() + ' ');

如果您知道的元素不嵌套元素，這將是最好使用簡單：

$('#id').text(' ' + $('#id').text() + ' ');

（*）的原因對於使用jQuery而不是純javascript的瀏覽器（我在看你，IE），有不同的內置屬性來獲取和設置這些值。 jQuery讓你免於擔心這一點。

來源

2011-09-21 17:59:50 harpo

@ cj333，嗯......在javascript中使用正則表達式修改活動頁面中的每個元素？你讓我想知道，爲什麼？ – harpo

正則表達式在哪裏？ –

你的情況：

$("*").html(function(index, html){ return " " + html + " "; });

來源

2011-09-21 18:38:47 roberkules

沒有jQuery的：

var els =document.getElementsByTagName('*'), el; 
for(var i = 0; i < els.length; i++) { 
    el = els[i] 
    el.innerHTML = ' ' + el.innerHTML + ' '; 
}

來源

2011-09-21 18:47:28 Joe

天真（！和不正確）的例子是：

var victims = document.querySelectorAll('body *'); 
for(var i = 0; i < victims.length; i++) { 
    victims[i].innerHTML = " " + victims[i].innerHTML + " "; 
}

但是，一旦你運行它，你會發現你的所有元素都被破壞了！因爲，當你改變innerHTML時，你也在改變元素的孩子。但我們可以避免這種情況，通過不替換內容，但添加它：

var padLeft = document.createTextNode(" "); 
var padRight = document.createTextNode(" "); 
victims[i].appendChild(padRight); 
victims[i].insertBefore(padLeft, victims[i].firstChild);

看起來很酷！但是，不 - 我們毀掉了我們的腳本標籤，圖像等等。讓我們解決這個問題太：

var victims = document.querySelectorAll('body *'); 
for(var i = 0; i < victims.length; i++) { 
    if(victims[i].hasChildNodes) { 
    var padLeft = document.createTextNode(" "); 
    var padRight = document.createTextNode(" "); 
    victims[i].appendChild(padRight); 
    victims[i].insertBefore(padLeft, victims[i].firstChild); 
    } 
}

在這裏，你拿到劇本:)它不跨瀏覽器的一路下跌至Netscape4，但也足以理解基本概念。

來源

2011-09-21 19:01:30 c69

你的第二個片段是要走的路。簡單而簡潔。 – 2011-09-21 20:01:41

好的答案是，您使用適當的DOM方法而不是其他人的答案來處理innerHTML濫用。 – Incognito

哈哈@「受害者」 –

如何在DOM元素的內容之前和之後插入空格？

回答

相關問題