Javascript / Jquery+ Replace single and double quotes in a inner html content

Question

Let's say I have a DIV as below.

<div id="mydiv">
    <p class="abc">some text here</p>
    <p class="xyz"><img src="img.jpg" title="my img"/> some "double quoted text" here</p>
</div>

I read the inner html of the div.

var originalcontent = $("mydiv").html();

Now I need to replace double quotes for the texts only but not for the tag attributes. So my output should be as below.

var myoutput = '<p class="abc">some text here</p><p class="xyz"><img src="img.jpg" title="my img"/> some &quot;double quoted text&quot; here</p>'

Can you suggest me a solution please. Thank you!

Answer 1

Try this:

function replace_text(node){ 
  node = node || document.getElementById('mydiv'); // Change 'mydiv' if you need 

  var children = node.childNodes;
  var i = 0;

  while(node = children[i]){ // While-loop

    if (node.nodeType == 3){ // Some text, replace
        if (node.textContent) { // Not IE (IE's equivalent to textContent is nodeValue)
            node.textContent = node.textContent.replace(/"/g, '"');
        }
        else { // IE
            node.nodeValue = node.nodeValue.replace(/"/g, '"');
        }
    } else { // not text, take step further
      replace_text(node); 
    } 
    i++; 
  } 

} // While-loop


// Don't forget to call function
replace_text();

Answer 2

With Jquery You can do this :

    String.prototype.replaceAll = function(stringToFind,stringToReplace){
    var temp = this;
    var index = temp.indexOf(stringToFind);
        while(index != -1){
            temp = temp.replace(stringToFind,stringToReplace);
            index = temp.indexOf(stringToFind);
        }
        return temp;
   };
    $(function(){                     

            $("#mydiv").children().each(function(){
                 var text=$(this).text(); 
                 text=text.replaceAll("\"","""); 
                 //alert(text);
                 $(this).text(text); 
             });
    });