Reputation: 7598
I'm struggling for quite some time with the following question (that looks so simple). I want to change words between double curly brackets without breaking any events.
The difficulty lies in the fact that I don't know what events are set. So the background-color
on the span
is just an example, but could be anything.
This is my html:
<div class="test">foo <span>bar</span> {{ baz }}</div>
This is my JS:
$("span").
css('background-color', 'red').
click(function(){
alert('Clicked bar!');
});
$( ".test" ).
contents().
each(function(){
if( $(this).text().indexOf('{{') !== -1 )
{
$(this).
text().
replace(/{{\s?([^}]*)\s?}}/, "HOW DO I CHANGE {{ baz }} FOR SOMETHING ELSE WITHOUT BREAKING THE EVENT? THIS DOESN'T WORK");
}
});
Doing something like the example below wouldn't work because it breaks the action on the span
.
$('.test').
html(
$('.test').
html().
replace(/{{\s?([^}]*)\s?}}/, 'baq')
);
Upvotes: 0
Views: 221
Reputation: 700910
To preserve the elements you would want to replace only text inside the elements. You can make a function that loops through the nodes in the element and replaces text in the text nodes, and calls itself with any elements. That way you can replace the text around elements that you want to preserve, and even text inside those elements:
$("span").
css('background-color', 'red').
click(function(){
alert('Clicked bar!');
});
function replace(el) {
var c = el.childNodes;
for (var i = 0; i < c.length; i++) {
if (c[i].nodeType == 3) {
c[i].textContent = c[i].textContent.replace(/{{\s?([^}]*)\s?}}/, "Something else");
} else {
replace(c[i]);
}
}
}
replace($('.test')[0]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test">foo {{ baz }} bar <span>bar {{ baz }} foo</span> foo {{ baz }} foo</div>
Upvotes: 1
Reputation: 8676
What you can do is:
<div class="test">foo <span class="bar">bar</span> {{ baz }}</div>
jQuery
$("span").css('background-color', 'red')
$(".test")
.on("click", "span", function(){
alert('Clicked bar!');
});
$('.test')
.html(
$('.test')
.html()
.replace(/{{\s?([^}]*)\s?}}/, 'baq')
);
However, you would probably be better off doing a more targeted replace with a specific element for baz, span.baz
?
Upvotes: 0