Replace a string with HTML inside a div using jQuery

Question

I have

<div class="test">hello everyone</div>

and I want to change each hello in this div with

<h1>helllo</h1>

for example I've used

$(this).text().replace("hello", "<h1>hello<h1>");

but it outputs

<h1>hello</h1>

I want it apply as HTML not as text how can I do it?

What does `$(this)` refer to in your code? How are you invoking your jQuery? — j08691, Jan 06 '19 at 19:28
`$(".code").text(function () { return $(this).html($(this).html().replace("int", "int")); });` — mohamd Agoumi, Jan 06 '19 at 19:31
`$(".code").html($(".code").html().replace("int", "int"));` ... what you wrote should be this (without any wrapping function). — trincot, Jan 06 '19 at 19:35
Possible duplicate of [Change tag using javascript](https://stackoverflow.com/questions/13389751/change-tag-using-javascript) — Heretic Monkey, Jan 06 '19 at 19:38
can't be used for multiple times? for looking more than just one word? — mohamd Agoumi, Jan 06 '19 at 19:38
Or [Wrap specific part of string with HTML element](https://stackoverflow.com/q/17498746/215552) or [JavaScript regex - How to wrap matches with tag?](https://stackoverflow.com/q/29616937/215552) — Heretic Monkey, Jan 06 '19 at 19:40

Karthikeyan · Answer 1 · 2019-01-06T19:39:27.190

1

Your code is only replacing the text returned. That too it wont replace in the DOM, it will only be in javascript. So after replacing the text, render the returned value using .html()

var $myDiv = $('.test');
$myDiv.html($myDiv.text().replace("hello", "<h1>hello</h1>"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test">hello everyone</div>

edited Jan 06 '19 at 19:39

answered Jan 06 '19 at 19:31

Karthikeyan

302
1
11

1

Answers are better when you provide explanation of the code you suggested. – But those new buttons though.. Jan 06 '19 at 19:35
This code was simple and self explanatory, hence I did not explain it. Now I have updated – Karthikeyan Jan 06 '19 at 19:40

AndrewL64 · Accepted Answer · 2019-01-06T19:39:42.797

0

If you are interested in a pure JavaScript approach, you can use the innerHTML() property to replace your string with html like this:

var x = document.querySelector(".test");
x.innerHTML = x.innerHTML.replace("hello", "<h1>hello</h1>");

<div class="test">hello everyone</div>

edited Jan 06 '19 at 19:39

answered Jan 06 '19 at 19:35

AndrewL64

15,794
8
47
79

1

The backticks aren't necessary, you don't need template strings here – Sebastian Speitel Jan 06 '19 at 19:38
@SebastianSpeitel Thanks for the heads up :) Answer updated mate. – AndrewL64 Jan 06 '19 at 19:40
doesn't work when you are locking for two words to change – mohamd Agoumi Jan 06 '19 at 19:51
@mouhamdAgoumi It does work for a string with multiple words too. Check this [jsFiddle](https://jsfiddle.net/AndrewL64/1gy7ukr5/10/) to see how I changed two words from a string. – AndrewL64 Jan 06 '19 at 20:08
I didn't mean "hello world" for example I meant `x.innerHTML = x.innerHTML.replace("hello", "
hello
");` `x.innerHTML = x.innerHTML.replace("world", "
World
");` – mohamd Agoumi Jan 07 '19 at 14:46
1

@mouhamdAgoumi The current solution works for that too. Check here: https://jsfiddle.net/AndrewL64/1gy7ukr5/14/ – AndrewL64 Jan 07 '19 at 16:53

score 0 · Answer 3 · answered Jan 06 '19 at 21:06

0

.html() to access & change the html, regex to replace hello with <h1>hello</h1>

$(this).html($(this).html().replace(/hello/g,"<h1>helllo</h1>"));

answered Jan 06 '19 at 21:06

hanshenrik

19,904
4
43
89

score 0 · Answer 4 · answered Jan 07 '19 at 15:44

0

Hey I wanted to highlight a code in my div but since I didn't have a lot of time to do that I just used highlight.js to do that but I'm still looking for a good idea to do that

answered Jan 07 '19 at 15:44

mohamd Agoumi

80
1
11

score -3 · Answer 5 · answered Jan 06 '19 at 19:45

-3

The code you have written for this replacement is perfectly nice but instead replacing a particular section, you are replacing complete div data

1.) Store div content to a variable e.g. var myDiv

2.) Replace desired content

3.) Put back replaced portion back to music

Example

jQuery(".test").html(function(){
      jQuery(this).text().replace("hello", "<h1>hello</h1>");
})

answered Jan 06 '19 at 19:45

Prx

1
3

text() will html-encode the argument, the html will be `<h1>hello<h1>` - and you forgot to save the results anywhere.. and you don't use a regex to match every hello, just the first will be replaced. – hanshenrik Jan 06 '19 at 21:11

Replace a string with HTML inside a div using jQuery

hello

5 Answers5

hello

World