Replace any plain-text to class of specific div

Question

Trying to replace any plain-text like [make-this-class] to class like <div class='make-this-class'></div> of specific div <div class='this-div-only'></div>.

HTML:

<div class='not-others-div'>
text text [make-this-class] text
</div>
Text text text
<div class='this-div-only'> <!-- this div only -->
text text [make-this-class] text
</div>

How to replace any plain-text [any-text] to a class of specific div of dom elements by jquery ?

You could remove the specific text node and replace it.

user4164128
– user4164128

2015-10-04 15:03:22 +00:00
Commented Oct 4, 2015 at 15:03 — user4164128
– user4164128, Commented Oct 4, 2015 at 15:03

guest271314 · Accepted Answer · 2015-10-04 15:22:16Z

3

Try utilizing .html() , String.prototype.replace() with RegExp /\[(.*)\]/

$(".this-div-only").html(function(i, html) {
  return html.replace(/\[(.*)\]/, $("<div />", {"class":"$1"})[0].outerHTML)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div class='not-others-div'>
text text [make-this-class] text
</div>
Text text text
<div class='this-div-only'> <!-- this div only -->
text text [make-this-class] text
</div>

edited Oct 4, 2015 at 15:22

answered Oct 4, 2015 at 15:14

guest271314

1

Sign up to request clarification or add additional context in comments.

7 Comments

charlietfl Over a year ago

you are replacing the whole inner html, not the selected placeholder

Aariba Over a year ago

Working, but others text or content become Deleted or removed. Please fix this.

GrafiCode Over a year ago

regexp looks nice. i'm upvoting this.

Aariba Over a year ago

@guest271314 Hi Serious problem: It replace only one [text], It should replace text to class all text of same dive, like: [text1] ... [text2] ... [text3] on same dive class. Please fix this.

guest271314 Over a year ago

@Aabira "Serious problem: It replace only one [text], It should replace text to class all text of same dive, like: [text1] ... [text2] ... [text3] on same dive class. Please fix this." ? Not certain interpret comment correctly ? [text1] ... [text2] ... [text3] not appear at html at Question ? Tried adding g flag to RegExp ? Can create jsfiddle jsfiddle.net to demonstrate ?

|

GrafiCode · Accepted Answer · 2015-10-04 15:06:11Z

0

you store the content of your div, replace the string you're looking for and finally update your div's content with new content.

var content = $('.this-div-only').html();

var newcontent = content.replace('[make-this-class]', '<div class="make-this-class"></div>');

$('.this-div-only').html(newcontent);

answered Oct 4, 2015 at 15:06

GrafiCode

3,3653 gold badges31 silver badges33 bronze badges

4 Comments

Aariba Over a year ago

thank, but how to replace any text like [any-text] to class of html node?

GrafiCode Over a year ago

second statement replaces your placeholder... you want it to be dynamic? elaborate your question please.

Aariba Over a year ago

i mean when i put any text inside [ ], like [any text here] , text will be class of html node.

GrafiCode Over a year ago

in this case, best solution would be using regular expressions to catch every patterns matching [ only alphabetical charachers and the dash sign ]. I suck at regexps, sorry :)

Collectives™ on Stack Overflow

Replace any plain-text to class of specific div

2 Answers 2

7 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related