CODEWITHSUNDEEP
javascriptjquery
Joanne
Joanne

Reputation: 514

Replace strings in only targeted ID's

I want to replace the [space]-[space] part in the example below

This - is - an - example - message

(including the spaces before and after the minus symbol)

with 

<div class="withthiscss">xx</div>

The HTML is:

<p class="product-title" id="fixthistitle">This - is - an - example - message</p>

I only want to change this for ID's containing 'fixthistitle'.

So the end result would be:

<p class="product-title" id="fixthistitle">This<div class="withthiscss">xx</div>is<div class="withthiscss">xx</div>an<div class="withthiscss">xx</div>example<div class="withthiscss">xx</div>message</p>

Normally one would just simple changed the HTML in there to get the formatting you want, however this is pre-generated text, so I cannot change this. Therefor I need a JS/jQuery solution for this?

Maybe someone can share how to achieve this? I hope this makes sense for someone.

EDIT :

Sorry my bad, an ID should always be unique.

Anyways; thank you kindly for the many answers / solutions. Highly appreciated!

Upvotes: 0

Views: 92

Answers (8)

Pranav C Balan
Pranav C Balan

Reputation: 115212

id should be unique so use class instead

  1. You can use html() for iterate and update the content
  2. Split the content using split('-') (or using regex split(/\s+-\s+/) )
  3. Now join the array with <div class="withthiscss">xx</div>, using join()

$('#fixthistitle').html(function(i, v) {
  return v.split('-').join('<div class="withthiscss">xx</div>')
});
.withthiscss {
  color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p class="product-title" id="fixthistitle">This - is - an - example - message</p>

Using regex

$('#fixthistitle').html(function(i, v) {
  return v.split(/\s+-\s+/).join('<div class="withthiscss">xx</div>')
});
.withthiscss {
  color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p class="product-title" id="fixthistitle">This - is - an - example - message</p>

Upvotes: 5

Andrei Bazanov
Andrei Bazanov

Reputation: 352

IDs are supposed to be unique!!!

$("#fixthistitle").each(function() {
    var str = $(this).text();
    var res = str.replace(" - ", "whatever");
    $(this).text(res);
});

But this will stop after it finds the first occurrence. So you need to identify the row you want by a class attribute or a data- attribute. Then it will work.

Otherwise you can try this:

$("p").each(function() {
    if ($(this).attr('id') == 'fixthistitle')
    {
        var str = $(this).text();
        var res = str.replace(/\s-\s/g, ' ');
        $(this).text(res);
    }
});

Dependency: jQuery 1.9.x but it should work with most versions of jQuery

Upvotes: 1

Cyril Cherian
Cyril Cherian

Reputation: 32327

This can do:

var k = $("#fixthistitle").text();
str= k.replace(/[ ]+-[ ]+/g,'<div class="withthiscss">xx</div>');
$("#fixthistitle").html(str);

Working code here

Upvotes: 1

sunitj
sunitj

Reputation: 1245

To replace the " - " part you can use regular expression 

"This - is - an - example - message".replace(/ - /g,"<div class='withthiscss'>xx</div>")

Now since it is available in HTML first we need to get the text from HTML tag. SO here is the code

var originalText = $('#fixthistitle').text(),
    transformedText = originalText.replace(/ - /g,"<div class='withthiscss'>xx</div>")

$('#fixthistitle').text(transformedText)

Upvotes: 1

GreyRoofPigeon
GreyRoofPigeon

Reputation: 18113

You can split the text on - and then rejoin it with the div:

  $('#fixthistitle').html( $('#fixthistitle').html().split(' - ').join('<div class="withthiscss">xx</div>') );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="product-title" id="fixthistitle">This - is - an - example - message</p>

Upvotes: 3

VisioN
VisioN

Reputation: 145388

One possible solution:

$('#fixthistitle').html(function(i, html) {
    return html.split(/\s+-\s+/).join('<div class="withthiscss">xx</div>');
});
.withthiscss {
    color: #00f;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p class="product-title" id="fixthistitle">This - is - an - example - message</p>

Upvotes: 2

AmmarCSE
AmmarCSE

Reputation: 30557

$('#fixthistitle').html(function() {
  var find = " - ";
  var regex = new RegExp(find, "g");
  return $(this).html().replace(regex, '<div class="withthiscss">xx</div>');
});
.withthiscss {
  color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p class="product-title" id="fixthistitle">This - is - an - example - message</p>

Upvotes: 1

hjpotter92
hjpotter92

Reputation: 80639

As already mentioned in comment, use class instead of id if you want to perform this task on several items/elements. A jQuery + regex approach would be:

$('.fixthistitle').each(function(i, v) {
  var s = $(this).text();
  $(this).html(s.replace(/\s-\s/, '<div class="withthiscss">xx</div>'));
});

Upvotes: 2

Related Questions