CODEWITHSUNDEEP
jqueryhtml
Saurabh Aren Bharatiya
Saurabh Aren Bharatiya

Reputation: 109

manipulation of string value to html tags

I have a string value as:

var str = 'hello how are you <a contenteditable="false" href="http://localhost:8080/GuessKaro2/friendprofile/NA==
/Praveen-Pandey.html" class="addedUserName addedUser tooltipstered newTagClass" dir="4" rel="[email protected]" id="4">Praveen Pandey</a>?????'

Now I want that this above input looks like this:

var str = '<span>hello how are you</span> <a contenteditable="false" href="http://localhost:8080/GuessKaro2/friendprofile/NA==
/Praveen-Pandey.html" class="addedUserName addedUser tooltipstered newTagClass" dir="4" rel="[email protected]" id="4">Praveen Pandey</a><span>?????</span>'

I have one more string value :

var str = 'hello how are you <a contenteditable="false" href="http://localhost:8080/GuessKaro2/friendprofile/MzMx
/praveen-arvind.html" class="addedUserName addedUser tooltipstered newTagClass" dir="331" rel="[email protected]" id="331">praveen arvind</a> &gt;&gt;&gt;<br>'

And, I want this looks like this:

I have one more string value :

var str = '<span>hello how are you</span> <a contenteditable="false" href="http://localhost:8080/GuessKaro2/friendprofile/MzMx
/praveen-arvind.html" class="addedUserName addedUser tooltipstered newTagClass" dir="331" rel="[email protected]" id="331">praveen arvind</a> <span>&gt;&gt;&gt;</span><br>'

Are you getting my point? My Point is Plain characters and special characters are to be wrapped into span tag and anchor tag or any other tag remains same along with that.

Upvotes: 1

Views: 51

Answers (2)

Pranav C Balan
Pranav C Balan

Reputation: 115222

You can do something like this using jQuery

var str = 'hello how are you <a contenteditable="false" href="http://localhost:8080/GuessKaro2/friendprofile/NA==/Praveen-Pandey.html" class="addedUserName addedUser tooltipstered newTagClass" dir="4" rel="[email protected]" id="4">Praveen Pandey</a>?????';

console.log(
  $('<div>', {
    // generate a temporary div with string value as html
    html: str
  }).contents()
  // get each nodes including text and comment nodes
  .each(function() {
    // iterate over them
    if (this.nodeType === 3)
    // if text node then replace with wrapped span 
      $(this).replaceWith($('<span>', {
      text: this.nodeValue
        // setting span text as text node value
    }));
    // or use $(this).wrap('<span>'); - for wrapping
  }).end()
  // move to previous selector, here the temporary div
  .html()
  // get html content
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Upvotes: 1

Mosh Feu
Mosh Feu

Reputation: 29277

The trick is to put this html into temp div. then search for text nodes and wrap them with span.

var str = 'hello how are you <a contenteditable="false" href="http://localhost:8080/GuessKaro2/friendprofile/NA==/Praveen-Pandey.html" class="addedUserName addedUser tooltipstered newTagClass" dir="4" rel="[email protected]" id="4">Praveen Pandey</a>?????';

var div = $('<div />').html(str);
div.contents().each(function() {
  if (this.nodeType == 3) {
    $(this).wrap('<span>');  
  }
});

alert(div.html());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Upvotes: 0

Related Questions