Is it possible to get the string inside the enclosing '<' and '>' of a tag using jquery or plain javascript?

Question

If my question isn't clear,I don't want the outerhtml which returns all the contents inside a node.I don't want those.For example:

<div id="foo" class="something" style="width:80%; display:inline-block">
  Hello!
  <div id="bar" class="something_else">
    How are you?Hope you are doing well!
  </div>
</div>

Now,outerHTML of 'foo' will give the whole string representation of its DOM structure.I just want

div id="foo" class="something" style="width:80%; display:inline-block"

Is it possible to get this without using regex/string matching?

I suggest you first correct your expected result. Current one has no sense. — unalignedmemoryaccess, Jul 06 '17 at 14:40
So you want the opening tag of the `div`, without the `<` and `>` delimiters...? That's a really weird requirement that seems like an X/Y issue. Why do you need this? — Rory McCrossan, Jul 06 '17 at 14:44
You have the nodeName followed by a collection of attribute names and values. So yeah you can javascript it. But I agree with @RoryMcCrossan, what do you intend to use that for? — James, Jul 06 '17 at 14:44
It's not that I don't need those delimiters.Its fine.Yeah and I need this to get the diff between two htmls.First,I am replacing the tags with custom tags ,running a diff and then restoring all those tags.I tried htmldiff.js but it doesn't work properly when there are strong tags,etc.Is there a better approach to this problem? — 4words, Jul 06 '17 at 16:50

score 4 · Answer 1 · answered Jul 06 '17 at 14:44

4

You can get the outerHTML and then parse the part you want:

console.log(
    document.getElementById('foo').outerHTML.match(/<([^>]+)>/)[1]
);

<div id="foo" class="something" style="width:80%; display:inline-block">
  Hello!
  <div id="bar" class="something_else">
    How are you?Hope you are doing well!
  </div>
</div>

answered Jul 06 '17 at 14:44

Johan Karlsson

6,419
1
19
28

2

Agree, but OP didn't want regex matching – Serge K. Jul 06 '17 at 14:46
4

`
– freedomn-m Jul 06 '17 at 14:46
1

OP: *"Is it possible to get this **without using regex**/string matching?*" – freedomn-m Jul 06 '17 at 14:48
3

Man, it's like people never saw [this post](https://stackoverflow.com/a/1732454/621962)... – canon Jul 06 '17 at 14:51

score 4 · Accepted Answer · answered Jul 06 '17 at 14:48

4

Using javascript element.nodeName and element.attributes to form a string:

var foo = document.getElementById('foo');
console.log(crazyString(foo));

function crazyString(el) {
  var a = [el.nodeName];
  var atts = el.attributes;
  for (var i=0; i < atts.length; i++) {
    a.push(atts[i].name + '="' + atts[i].value + '"');
  }
  return a.join(" ");
}

<div id="foo" class="something" style="width:80%; display:inline-block">
  Hello!
  <div id="bar" class="something_else">
    How are you?Hope you are doing well!
  </div>
</div>

answered Jul 06 '17 at 14:48

James

20,957
5
26
41

that´s the solution. I don´t understand that Johann Karlsson get 5 upvotes... I vote for your solution. – Frank Wisniewski Jul 06 '17 at 14:51
1

@FrankWisniewski because brittle one-liners are easily digested. – canon Jul 06 '17 at 14:52
Here is the one liner : `document.getElementById('foo').tagName + ' ' + Array.prototype.slice.call(document.getElementById('foo').attributes).map((e) => e.name + '="' + e.value + '"').join(' ')` – Serge K. Jul 06 '17 at 15:03
1

only for fun and bad code... ``${foo.tagName} ${Array.from(foo.attributes).map((e) => `${e.name}="${e.value}"`).join(' ')}`` – Frank Wisniewski Jul 06 '17 at 15:46
@FrankWisniewski Pros and cons to both our solutions. This for example doesn't return the exact string as OP stated (uppercase div), and might get the order of attributes wrong, while mine can easily fail on various attributes. – Johan Karlsson Jul 06 '17 at 15:48
The editor don´t show the template literal. That must be set into template literals. But it´s only for fun.... – Frank Wisniewski Jul 06 '17 at 15:49
with the spread operator it is shorter... [jsbin](https://jsbin.com/segonotujo/edit?js,console) – Frank Wisniewski Jul 06 '17 at 18:29

Arun · Answer 3 · 2017-07-06T15:09:02.957

You can try something like this,

var element = document.getElementById("foo");

var tag = element.tagName; 
  $.each(element.attributes, function() {
    tag += " "+ this.name + '"'+ this.value+ '"';   
  });
  alert(tag);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo" class="something" style="width:80%; display:inline-block">
  Hello!
  <div id="bar" class="something_else">
    How are you?Hope you are doing well!
  </div>
</div>

score 0 · Answer 4 · answered Jul 06 '17 at 15:12

Another version using Array#reduce

let el = document.getElementById('foo');

let res = [].slice.call(el.attributes).reduce((a, c) => {  
  return a.concat(c.name + '="' + c.value + '"');
}, [el.tagName.toLowerCase()]).join(' ');

console.log(res)

<div id="foo" class="something" style="width:80%; display:inline-block"></div>

Is it possible to get the string inside the enclosing '<' and '>' of a tag using jquery or plain javascript?

4 Answers4