I have somewhere on website a specific text, let's say "lollypops", and I want to replace all the occurrences of this string with "marshmellows". The problem is that I don't know where exactly the text is. I know I could do something like:
$(body).html($(body).html().replace('lollypops', 'marshmellows'));
This would probably work, but I need to rewrite as little HTML as I can, so I'm thinking something like:
class
, but not in src
In example, I would have structure like this
<body> <div> <div> <p> <h1> <a>lollypops</a> </h1> </p> <span>lollypops</span> </div> </div> <p> <span class="lollypops">Hello, World!</span> <img src="/lollypops.jpg" alt="Cool image" /> </p> <body>
In this example, every occurrence of "lollypops" would be replaced, only <img src="...
would remain the same and the only elements that would actually be manipulated would be <a>
and both <span>
s.
Does anybody know how to do this?
You can replace many in one line: string. replace(/[#_]/g, x => ({'_': ' ', '#': ''})[x]); Note the () around the object — it will error without them.
How to find if a word or a substring is present in the given string. In this case, we will use the includes() method which determines whether a string contains the specified word or a substring. If the word or substring is present in the given string, the includes() method returns true; otherwise, it returns false.
We can replace HTML elements using the jQuery . replaceWith() method. With the jQuery replaceWith() method, we can replace each element in the set of matched elements with the provided new content and return the set of elements that were removed.
To replace a DOM element with the specified HTML or DOM elements using jQuery, use the replaceWith() method. The replaceWith (content) method replaces all matched elements with the specified HTML or DOM elements. This returns the JQuery element that was just replaced, which has been removed from the DOM.
You could do something like this:
$("span, p").each(function() { var text = $(this).text(); text = text.replace("lollypops", "marshmellows"); $(this).text(text); });
It will be better to mark all tags with text that needs to be examined with a suitable class name.
Also, this may have performance issues. jQuery or javascript in general aren't really suitable for this kind of operations. You are better off doing it server side.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With