replace plain-text with html using jQuery

Question

I'm trying to write a replacewith function in jQuery that will replace specific words with html.

Basically I'm trying to replace something like [this] with <span class='myclass'> as the document is loaded. I've looked around for a couple samples but the couple things I saw I was unable to get to work. I'm still learning jQuery so I'm hoping someone could give me a couple suggestions as what to try.

Thanks in advance, Steven.

HTML/text:

[this]hello world![/this]

JavaScript:

$(document).ready(function() {    
     // Using just replace
     $("body").text().replace(/[this]/g,'<b>')
});

--EDIT--

I've made a few changes to the function using Nir's demo below. Heres a few more details about what I'm doing. I'm trying to make an inline fraction, which I already have the the appropriate classes and whatnot made. It works well when in html, but when I run the jQuery function It doesn't seem to work.

It's obvious the tags are replaced, but my css doesnt really seem to be working as I mentioned.

Heres a link to the HTML HERE

and heres a link to the jsfiddle HERE

$(document).ready(function() {    

// Using just replace
var text = $('body').text();
$("body").html(text.replace(/\[math\]/g,'<span class="container">').replace(/\[\/math\]/g,'</span>'));

var textt = $('body').text();
$("body").html(textt.replace(/\[top\]/g,'<div class="containme">').replace(/\[\/top\]/g,'</div>'));

var textl = $('body').text();
$("body").html(textl.replace(/\[line\]/g,'<div class="borderme">&nbsp;</div>'));

var textb = $('body').text();
$("body").html(textb.replace(/\[bot\]/g,'<div class="containme2">').replace(/\[\/bot\]/g,'</div>'));
 });

This HTML

 <span class="readme">Whats up, here's a fraction.&nbsp;
<span class="container">
    <div class="containme">1</div>
    <div class="borderme">&nbsp;</div>
    <div class="containme2">2</div>
    </span>
 &nbsp;&nbsp;Hello? Whats up, here's a fraction.&nbsp;
    <span class="container">
    <div class="containme">1</div>
    <div class="borderme">&nbsp;</div>
    <div class="containme2">2</div>
  </span>
  &nbsp;&nbsp;Hello? Whats up, here's a fraction.&nbsp;
  </span>

to this shortend markup

<span class="readme"> Whats up, here's a fraction. [math][top]1[/top][line][bot]2[/bot][/math] </span>

How does the string you're looking for influence the expected output? And you're just inserting an opening tag? What about the closing tag for that inserted element? — David Thomas
– David Thomas, Commented Jul 3, 2012 at 21:13
(a) You did not set up your fiddle to use jQuery (b) .replace returns a new string: developer.mozilla.org/en/JavaScript/Reference/Global_Objects/… — Felix Kling
– Felix Kling, Commented Jul 3, 2012 at 21:15

adeneo · Accepted Answer · 2012-07-03 21:10:45Z

8

javascript replace() returns a new string, it does not alter the original string, so it should probably be:

$(document).ready(function() {    
    var content = $("body").text().replace(/\[this\]/g,'<b>')
    $("body").html(content);
});

Notice that the brackets will have to be escaped, otherwise it will replace each character inside the brackets with <b>.

Here's a FIDDLE

answered Jul 3, 2012 at 21:10

adeneo

319k29 gold badges410 silver badges392 bronze badges

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

2 Comments

David Thomas Over a year ago

A (slightly-updated) JS Fiddle to avoid the second replace() in your linked-fiddle.

xxstevenxo Over a year ago

this is a great demo, thank you very much. I'm going to make a few edits to my OP. i tried to the answer from Nic before i saw yours and, it did infact replace how i needed, but it seems as though my css isnt working properly. could you take a look at this demo to give me a few suggestions? jsfiddle.net/stevenschemers/juTtG/28

Kijewski · Accepted Answer · 2012-07-14 04:19:03Z

2

here is a demo that uses regex:

$(document).ready(function() {    
    // Using just replace
    var text = $('body').text();
    $("body").html(
        text.replace(/\[this\]/g,'<b>').replace(/\[\/this\]/g,'</b>')
    );
});

edited Jul 14, 2012 at 4:19

Kijewski

26.1k14 gold badges108 silver badges149 bronze badges

answered Jul 3, 2012 at 21:06

Nir

3561 silver badge5 bronze badges

3 Comments

Felix Kling Over a year ago

Please don't just link to the solution, also include the code in your answer. If the links becomes unavailable for whatever reason, your "answer" becomes useless.

xxstevenxo Over a year ago

thank you for the demo. I added a few more lines in attempt to complete the function for what i'm trying to do, and it seems as though i broke it :|. would you mind looking at this fiddle? jsfiddle.net/stevenschemers/juTtG/24

xxstevenxo Over a year ago

I updated my OP with more information regarding what I'm trying to actually accomplish. Thank you for your help

Олег Хитрень · Accepted Answer · 2020-04-27 11:28:53Z

0

As nobody explain way to replace text with custom HTML element now I use the next function:

replaceWithAnchor: function (el, text) {
        let anch = $('<span>');
        anch.attr('id', `my-link-1`);
        anch.text(text);

        var content = el.html().replace(text, '<span id="need-to-replace"></span>');
        el.html(content);
        el.find('#need-to-replace').replaceWith(anch);
    }

answered Apr 27, 2020 at 11:28

Олег Хитрень

274 bronze badges

Collectives™ on Stack Overflow

replace plain-text with html using jQuery

3 Answers 3

2 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related