获取一个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元素的全（原创）文本

回答

相关问题