Question

在我的javascript代码中，我需要获取元素的定义，但没有内容 - 既不是文本也不是子代。

E.g。为：

<div id="my_example_id" class="ShinyClass">
   My important text
   <span> Here</span>
</div>

我想编写一个javascript函数，当提供上面div的元素时，将返回以下字符串：

<div id="my_example_id" class="ShinyClass">

我一直在尝试对元素进行不同的操作，如innerHTML，outerHTML等类似的函数，但我无法弄清楚如何只获取我感兴趣的部分。是子字符串直到第一个>最佳解决方案？

编辑：选择元素不是问题的一部分 - 我知道如何做到这一点，没有概率。相反，问题是：当我已经选择了一个特定的元素时，如何仅将字符串解析为它自己的定义。

Answer 1

更新：

$(document).on('documentLoaded', function () {
    // do the next thing
});

只是某种方式来做到这一点，而不是说最好的。

const div = document.getElementById('my_example_id'); // get the node
const html = div.outerHTML.replace(div.innerHTML || '', ''); // simple set logic

console.log(html);

基本上你创建一个div的副本，创建一个父类，然后删除复制节点的innerHTML，只留下＆div;本身。将复制的节点附加到新父节点并显示父节点的innerHTML，它只是＆＃39; div＆＃39;你想要的。

Answer 2

你不需要做那些把它复制到父母那些花哨的东西......

// make a copy of the element
var clone = document.getElementById('my_example_id').cloneNode(true);
// empty all the contents of the copy
clone.innerHTML = "";
// get the outer html of the copy
var definition = clone.outerHTML;

console.log(definition);

我把它扔进了这个小提琴中的一个函数：https://jsfiddle.net/vtgx3790/1/

Answer 3

我想正则表达式就是你所需要的。检查这是否适合你

function getHtml(selector) {
  var element = document.querySelector(selector)
  var htmlText = element.outerHTML
  var start  = htmlText.search(/</)
  var end  = htmlText.search(/>/)
  return htmlText.substr(start, end + 1)
}
alert(getHtml('.ShinyClass'))

示例here

Answer 4

console.log(getElementTag("my_example_id"));

function getElementTag(myElementId) {
  var FullEelementObject = document.getElementById(myElementId);
  var FullElementText = FullEelementObject.outerHTML;
  var regExTag = new RegExp(/(<).*(>)/i);

  openingTag = FullElementText.match(regExTag);

  return openingTag[0];
}

将这个JSFiddle放在一起，它获取传递函数的元素的outerHTML，使用regExp获取完整的开始标记。

修改：Here is the JSFiddle

没有孩子的Javascript元素html

4 个答案: