CODEWITHSUNDEEP
javascriptjquery
Gloria
Gloria

Reputation: 1325

Dividing a string in 2 parts and placing each part in a different new string

I have a string (resultString) that contains long html codes. These codes are grouped in 2 main DIVs, window and Popup. 

resultString = "<div id=\"window\">window content --- long html codes</div><div id=\"PopUp\">Popup content --- long html codes</div>"

Now I want to retrieve the html content of window and popup DIVs separately and place them in 2 different strings (stringWindow and stringPopup).

stringWindow = "<div id=\"window\">window content --- long html codes</div>";
stringPopup = "<div id=\"PopUp\">Popup content --- long html codes</div>";

Is there any simple way to do so in jQuery/javascript? The stringWindow is constructed in an Ajax json webmethod function. Any help is well appreciated! Thanks in advance.

Upvotes: 5

Views: 175

Answers (7)

SKDesai
SKDesai

Reputation: 56

This is one way to do it with C#...

It may help...

Given your result string as...

resultString = "<div id=\"window\">window content --- long html codes</div><div id=\"PopUp\">Popup content --- long html codes</div>"

following should work.. 

string resultPopUp = resultString.Substring(resultString.IndexOf("<div id=\"PopUp"));
string resultWindow = resultString.Substring(resultString.IndexOf("<div id=\"window"), resultString.Length - resultString.IndexOf("<div id=\"PopUp\">")+2);

Maintaining the string structure as <div id=\"*****\"> this should work....

Upvotes: 1

George Simms
George Simms

Reputation: 4060

A version that doesn't use jQuery, doesn't assume it is in the document or can be put into the document but still interprets it as HTML -

var domParser = new DOMParser(),
    doc = domParser.parseFromString(resultString, "text/html"),
    content = ["window", "PopUp"].map(function(id) {
        return doc.querySelector("#" + id).innerHTML;
    }),
    stringWindow = content[0],
    stringPopup = content[1];

Upvotes: 2

prashant patil
prashant patil

Reputation: 319

I think this may help you :-

 var resultString = "<div id=\"window\">window content --- long html codes</div><div id=\"PopUp\">Popup content --- long html codes</div>"
        var splitter = document.createElement('div');
        splitter.innerHTML = resultString;

        var window = $(splitter).find("#window")
        var poppup = $(splitter).find("#PopUp")

Mark as an answer if it helps

Upvotes: 1

Amadan
Amadan

Reputation: 198324

Trivial in jQuery:

var resultString = "<div id=\"window\">window content --- long html codes</div><div id=\"PopUp\">Popup content --- long html codes</div>"

var $doc = $("<div>" + resultString + "</div>");
var stringWindow = $doc.find('#window').text();
var stringPopup = $doc.find('#PopUp').text();
console.log("window", stringWindow);
console.log("popup", stringPopup);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- results pane console output; see http://meta.stackexchange.com/a/242491 -->
<script src="http://gh-canon.github.io/stack-snippet-console/console.min.js"></script>

Not much harder in plain JS.

If by "Just the content" you don't mean "text" but markup inside the div, then replace text() with html().

EDIT: made into executable snippet.

Upvotes: 2

Pranav C Balan
Pranav C Balan

Reputation: 115222

You can use filter() and outerHTML

  1. Using filter you can filter element with certain selector
  2. Now you can use outerHTML for getting html content

var resultString = "<div id=\"window\">window content --- long html codes</div><div id=\"PopUp\">Popup content --- long html codes</div>",
  stringWindow, stringPopup;

stringWindow = $(resultString).filter('#window')[0].outerHTML;
stringPopup = $(resultString).filter('#PopUp')[0].outerHTML;

console.log(stringPopup, stringPopup);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Upvotes: 3

Dkova
Dkova

Reputation: 1097

if you want just the content do somthing like this: with jQuery:

 stringWindow =$('#window').innerHTML
 stringPopup =$('#PopUp').innerHTML

Only JS: 

stringWindow =document.getElementById('window').innerHTML
stringPopup =document.getElementById('Popup').innerHTML

Upvotes: 0

Sapikelio
Sapikelio

Reputation: 2604

Try this. It works for me. Demo

resultString = "<div id=\"window\">window content --- long html codes</div>   <div id=\"PopUp\">Popup content --- long html codes</div>";

var res = resultString.split("</div>");

stringWindow = res[0].replace(/^<div[^>]*>|<\/div>$/g, '');
stringPopup = res[1].replace(/^<div[^>]*>|<\/div>$/g, '');

Hope It Helps.

Upvotes: 1

Related Questions