Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery find and replace string

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:

  1. search for the string
  2. find the closest parent element
  3. rewrite only the closest parent element
  4. replace this even in attributes, but not all, for example replace it in 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?

like image 760
cypher Avatar asked Feb 25 '11 08:02

cypher


People also ask

How can I replace multiple characters in a string using jQuery?

You can replace many in one line: string. replace(/[#_]/g, x => ({'_': ' ', '#': ''})[x]); Note the () around the object — it will error without them.

How do I find a word in a string using jQuery?

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.

Can we replace in jQuery?

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.

How do you replace an element with another in jQuery?

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.


1 Answers

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.

like image 195
kgiannakakis Avatar answered Oct 07 '22 08:10

kgiannakakis