I'm working with a third party system that renders content into a html document like this:

<!-- ponentID: 1234 -->
<div class="some-class"> .... </div>

<!-- ponentID: 1235 -->
<div class="another-class"> .... </div>

So the system renders that ponentId into a ment. The system sadly provides no way for me to pass that id as a data attribute. I am currently stuck with this.

Is it possible to find all these ments and wrap them in a div/span where they are sitting in the document? I could then access that string and grab the id with regex.

Thanks

I'm working with a third party system that renders content into a html document like this:

<!-- ponentID: 1234 -->
<div class="some-class"> .... </div>

<!-- ponentID: 1235 -->
<div class="another-class"> .... </div>

So the system renders that ponentId into a ment. The system sadly provides no way for me to pass that id as a data attribute. I am currently stuck with this.

Is it possible to find all these ments and wrap them in a div/span where they are sitting in the document? I could then access that string and grab the id with regex.

Thanks

• javascript
• jquery
• html
• dom

3 Answers 3

try this, it grabs all ments in html file. if there is no other unrelated ments to your plan, this can do the job.

$(function() {
    $("*").contents().filter(function(){
        return this.nodeType == 8;
    }).each(function(i, e){
        alert(e.nodeValue);
    });
});

I will post non jQuery solution and much more efficient then traversing the whole DOM tree:

var x = document.evaluate('//ment()', document, null, XPathResult.ANY_TYPE, null),
    ment = x.iterateNext();

while (ment) {
    alert(ment.textContent);
    ment = x.iterateNext();
}

However this solution is not for IE, which doesn't implement document.evaluate methods, that's why be aware and use it only if you don't have to support IE.

Demo: http://jsfiddle/z6GU3/

You can get all the ments using a function like this:

var $ments = [];
$("*").contents().filter(function() {
    return $(this)[0].nodeName == "#ment";
}).each(function() {
    $ments.push($(this));
});

console.log($ments);

http://jsfiddle/Whre/Zjj3n/

Unfortunately, I do not understand what you mean by

wrap them in a div/span where they are sitting in the document

If the ment belongs to the next element, you could directly apply it to the element: http://jsfiddle/Whre/Zjj3n/3/