獲取一個HTML元素的全（原創）文本

編輯：看起來我們確定通過意見解決這個問題 - 這是通過獲取.outerHTML財產的價值實現。然而，至少在使用outerHTML時，Firefox和Chrome至少會「標準化」原始源代碼。例如，outerHTML的獲取一個HTML元素的全（原創）文本

<div id = "a"> <!-- string is 14 characters long //-->

仍返回

<div id="a">  <!-- string is 12 characters long //-->

顯然，這個問題將被視爲解決，如果結果字符串的格式將匹配原始HTML源代碼。啊!爲什麼outerHTML必須調整原始值？

---說了：---

我正在尋找一個解決方案來獲得點擊的HTML標記的全文。

起點的例子（注意：故意，法律但錯位的格式）：

<div id = "a" style ="color: blue ;">text</div> 

// Returns: div 
var doc = document.getElementById("id").tagName; 

// Returns: array of attribute name/value pair (without = or ") 
var attrs = document.getElementById("id").attributes;

我們怎麼會去產生下面的文本字符串，被點擊元素#A時：

<div id = "a" style= "color: blue ;">

我似乎還沒有找到這個解決方案。

這是幹什麼用的？

最終目標是確定標籤內容的任意的字符長度。假設它可以以任何可以產生可接受的HTML輸出的方式進行編輯。例如，下面兩種情況應該返回：

<div id=a style="color:blue">   // 28 
<div id = "a" style= "color: blue ;"> // 36

計數是很容易的部分。它正在獲取該標籤的實際字符串，就像它出現在源代碼中一樣，這就是問題所在。

來源

2015-09-08 InfiniteStack

關於「正常化」與outerHTML，它是如何屬性作品的必然結果，這是由串行化根據相關DOM片段[* HTML片段序列化算法*]（HTTP：//dev.w3 .ORG/HTML5/SPEC-LC /所述-end.html＃HTML片段的序列化算法）。它可能與源標記很少相似。順便說一句，「完整和原創」應該不會被「和」分開。 – RobG

你試過嗎？

document.getElementById('a').outerHTML

但這並不是每個瀏覽器工作，我想

來源

2015-09-08 23:38:48

從以下任何示例中使用outerHTML之後，對象將是一個字符串，因此您可以使用length屬性來獲取字符數，這應該回答問題的第二部分。 – user2242618

@MarcusAbrahão好猜。 Firefox在顯示頁面之前規範化源文件。在Firefox中查看頁面源或保存頁面不會（總是）反映源文件最初如何格式化。這個問題中的兩個例子都標準化爲'id =「a」'，但保留了引用屬性值之間的差異。 – traktor53

@ Traktor53的確如此！謝謝 –

這似乎做你想要什麼：

http://jsfiddle.net/abalter/c3eqnLrc/

HTML：

<div id="a" class="find-my-length" style="color:blue">First One</div> 
<div id="a " class="find-my-length" style= "color: blue ; " > Second  One </div  >

的JavaScript：

$('.find-my-length').on('click', function() { 
    var htmlString = $(this).prop('outerHTML'); 
    alert(htmlString + " has " + htmlString.length + " characters."); 
});

注意：有一件事沒有得到計算是空間之間的屬性。在屬性中的空間被計數。

來源：Get selected element's outer HTML

什麼：prop('outerHTML')？

var outerHTML_text = $('#item-to-be-selected').prop('outerHTML');

而且設置：

$('#item-to-be-selected').prop('outerHTML', outerHTML_text);

來源

2015-09-08 23:48:54 abalter

這應該是一個評論，而不是一個答案。 jQuery沒有被標記或要求。 – RobG

JQuery只是JavaScript。所以除非JavaScript被排除在答案之外，否則JQuery不應該如此。 JQuery現在幾乎是使用JavaScript的標準方式。 – abalter

它被認爲是不好的禮儀，用一個沒有被要求或標記的圖書館回答，否則會有大量的基於圖書館的答案，並假定OP有一些關於如何區分它們的想法。不告訴OP正在使用的庫是以更大的劣勢開始它們。 – RobG

使用outerHTML得到充分的標記，然後剝離出開放標記之後的一切。

var openTag = document.getElementById("a").outerHTML.split(">")[0] + ">";

來源

2015-09-08 23:50:56 JeredM

我喜歡這個解決方案。 +1因爲能夠識別我只需要直到結束標記>（而不是完整的innerHTML內容）的文本。謝謝！ – InfiniteStack

這個答案依賴於沒有屬性值和「>」字符的元素。 – RobG

獲取一個HTML元素的全（原創）文本

回答

相關問題