replace text, but ignore a certain string inside the document - javascript

I have a big string: Hello <span class="ashakd">my</span> name is <bob>!
I have a second string: llo my name
I have what i want to replace it with:<span class="ashakd">llo my name</span>
I need to replace() it as if the <span class="ashakd"> and </span> didnt exist, but they are replaced with the string so the final result is: He<span class="ashakd">llo my name</span> is <bob>!
PS: <bob> exists so you cant ignore any text between two >'s it must specifically ignore <span class="ashakd"> and </span>
very sorry if this is confusing. ask me to make it clearer if this is confusing
edit
sorry for being unclear, but it must only replace the within my replace. so if the original string was: Hello <span class="ashakd">my</span> name is <bob><span class="ashakd">hello</span>!
the result would be: He<span class="ashakd">llo my name</span> is <bob><span class="ashakd">hello</span>!

This may be too destructive to the original string, but I propose this solution:
var a = 'Hello <span class="ashakd">my</span> name is <bob>!';
var searchString = 'llo my name';
// remove all <span> and </span> tags, you may not want to remove any and all span tags???
a = a.replace(/<\/?span[^>]*?>/g,'');
a = a.replace(searchString,"<span class='ashakd'>"+searchString+"</span>");
What this does is remove all span tags, then search for your "llo my name" search string, and wrap that with a span tag.
Since you said you don't know regex that well, here's a description of:
/<\/?span[^>]*?>/g
<\/? means match on '<' and then optionally a /. This matches both the start and end tags, i.e. <span...> and </span>
[^>]*? means match any character that is NOT > in a non-greedy fashion, i.e. stop matching at the first > found.
The final /g means 'global', which means match <span> and </span> as many times as possible.

Related

How can I exclude a class inside a regex string?

I'm currently trying to build a regex which replaces all HTML tags inside a string, excluding a special element. The problem is that I've found no way excluding the closing tag of the special element also. This is my code:
let str = 'You have to pay <div class="keep-this">$200</div> per <span class="date">month</span> for your <span class="vehicle">car</span> <div class="keep-this">$500</div> also';
console.log(str.replace(/(?!<div class="keep-this">)(<\/?[^>]+(>|$))/g, ""));
How can I fix this?
Try this option, which matches all HTML tags, excluding those tags which have the attribute class="keep-this".
let str = 'You have to pay <input class="some-class"/> blah <div class="keep-this">$200</div> per <span class="date">month</span> for your <span class="vehicle">car</span> <div class="keep-this">$500</div> also';
console.log(str.replace(/<\s*([^\s>]+)(?:(?!\bclass="keep-this")[^>])*>(.*?)(?:<\/\1>)|<\s*([^\s>]+)(?:(?!\bclass="keep-this")[^>])*\/>/g, "$2"));
Here is an explanation of the regex pattern:
< match < of an opening tag
\s* optional whitespace
([^\s>]+) match and capture the HTML tag name in $1 (\1)
(?:(?!\bclass="keep-this")[^>])* match remainder of tag,
so long as class="keep-this" is not seen
> match > of an opening tag
(.*?) match and capture the tag's content in $2,
until hitting the nearest
(?:<\/\1>) closing tag, which matches the opening one
| OR
<\s*([^\s>]+) match a standalone tag e.g. <input/>
(?:(?!\bclass="keep-this")[^>])* without a closing tag
\/> which matches
Then, we simply replace all such matches with empty string, to effectively remove them.
If you want to remove all the html elements that do not have the class keep-this you might also make use of DOMParser and for example use :not.
let str = 'You have to pay <div class="keep-this">$200</div> per <span class="date">month</span> for your <span class="vehicle">car</span> <div class="keep-this">$500</div> also';
let parser = new DOMParser();
let doc = parser.parseFromString(str, "text/html");
doc.querySelectorAll("body *:not(.keep-this)").forEach(e => e.replaceWith(e.innerHTML));
console.log(doc.body.innerHTML);

Substring html tag using Javascript

I want to sub string and remove the , which appears within the span tag and display the name alone. Below are the two cases which needs to work.
Case1: <span class="datatableheader">No results found, </span>
Case2: <span class="datatableheader">Jude Gomes, </span>
A single function should help in removing the , in both cases and display the result as
<span class="datatableheader">No results found </span>
<span class="datatableheader">Jude Gomes </span>
Appreciate for any help.
Thanks
$(".datatableheader").html ($(".datatableheader").html().replace(",",""));
It's not widely recognized that .html accepts a callback function:
$('.datatableheader').html(function(i,old) {
return old.replace(/, ?/g, '');
});​
http://jsfiddle.net/3fBY4/1/
you can try this also
var parts = id.split(':'); //because u have case1: or case2:
// it will split into string in array//
$('#parts[1]').replace(",",""));
//try to print that it will work
nice question.

javascript regexp replace stuff wrapped in quotes?

I know some basic regexp, but here's the thing. Every charachter will be enclosed in spans.
I want things that are surrounded by quotes to be replaced, so, something like "something" would actually be
<span class="charachter">"</span>
<span class="charachter">s</span>
<span class="charachter">o</span>
<span class="charachter">m</span>
<span class="charachter">e</span>
<span class="charachter">t</span>
<span class="charachter">h</span>
<span class="charachter">i</span>
<span class="charachter">n</span>
<span class="charachter">g</span>
<span class="charachter">"</span>
(The line breaks are there just for convinience. It's just 1 long line in the real thing.)
How do I make that into:
<span class="charachter green">"</span>
<span class="charachter green">s</span>
<span class="charachter green">o</span>
<span class="charachter green">m</span>
<span class="charachter green">e</span>
<span class="charachter green">t</span>
<span class="charachter green">h</span>
<span class="charachter green">i</span>
<span class="charachter green">n</span>
<span class="charachter green">g</span>
<span class="charachter green">"</span>
? I'm using regexp because that "something" might be anything.
BTW: The use of jQuery in the code is allowed
There are more things that are .charachter class that I don't want to add class "green" to, just the ones enclosed in quotes
This might work, depending on the complexity of your page:
var quotes = $("span.charachter:contains('\"')");
for (var i = 0; i < quotes.length - 1; i++) {
quotes.eq(i).nextUntil(quotes.eq(++i)).andSelf().addClass("green");
}
Working demo: http://jsfiddle.net/3SRdD/2/
This assumes that:
A span.charachter will only ever contain one single character.
You will never have an unmatched quote.
The following siblings of a span.charachter with a quote are always more span.charachter elements, at least until the closing quote.
Simple jquery solution - something like?
$(".character").addClass("green")
if your pattern looks like this /"(.*)"/ you should place a question mark ? after the star * to make it ungreedy, like this /"(.*?)"/
also checkout repeating section on regular-expressions.info
You can't do it reliably, because " shows up inside the span as well.
But if you willing to be more restrictive you can search for <span class=".*" - but it will only match tags that look exactly like that.

Javascript regexp replace of multiline content between two tags (including the tags)

In the string
some text <p id='item_1' class='item'>multiline content\r\n\r\n for <br/>remove</p><br clear='all' id='end_of_item_1'/><p id='item_2' class='item'>another multiline content\r\n\r\n</p><br clear='all' id='end_of_item_2'/>
I need to remove
<p id='item_1' class='item'>multiline content\r\n\r\n for <br/>remove</p><br clear='all' id='end_of_item_1'/>
Can't find a way how to do it.
var id = 'item_1';
var patt=new RegExp("<p id='"+id+"'(.)*|([\S\s]*?)end_of_"+id+"'\/>","g");
var str="some text <p id='item_1' class='item'>multiline content\r\n\r\n for <br/>remove</p><br clear='all' id='end_of_item_1'/><p id='item_2' class='item'>another multiline content\r\n\r\n</p><br clear='all' id='end_of_item_2'/>";
document.write(str.replace(patt,""));
The result is
some text for
<br>
remove
<p></p>
<br id="<p id=" class="item" clear="all" item_2'="">
another multiline content
<p></p>
<br id="end_of_item_2" clear="all">
Please help to solve this.
Here's the regex for the current scenario. When the regex approach eventually breaks, remember that we warned that parsing HTML with regex was a fool's errand. ;)
This:
var s = "some text <p id='item_1' class='item'>multiline content\r\n\r\n for <br/>remove</p><br clear='all' id='end_of_item_1'/><p id='item_2' class='item'>another multiline content\r\n\r\n</p><br clear='all' id='end_of_item_2'/><ul><li>";
var id = 'item_1';
var patt = new RegExp ("<p[^<>]*\\sid=['\"]" + id + "['\"](?:.|\\n|\\r)*<br[^<>]*\\sid=['\"]end_of_" + id + "['\"][^<>]*>", "ig")
var stripped = s.replace (patt, "");
Produces this:
"some text <p id='item_2' class='item'>another multiline content
</p><br clear='all' id='end_of_item_2'/><ul><li>"
Why can't you use the DOM API to remove it? (add everything to the document, and then remove what you don't need)
var item1 = document.getElementById('item_1'),
endOfItem1 = document.getElementById('end_of_item_1');
item1.parentNode.removeChild(item1);
endOfItem1.parentNode.removeChild(endOfItem1);
I need to assume a bit of unspoken constraints from your question, to get this to work:
Am I right in guessing, that you want a regex, that can find (and then replace) any 'p' tag with a specific id, up to a certain tag (like e.g. a 'br' tag) with an id of 'end_of_[firstid]'?
If that is correct, than the following regex might work for you. It may be, that you need to modify it a bit, to get JS to accept it:
<p\s+id='([a-zA-Z0-9_]+)'.*?id='end_of_\1'\s*\/>
This will give you any constellation with the criteria, describled above, and the name if the id as group 1, It should now be a simple task, to check if group1 contains the id you want to remove and then replace the whole match with an empty string.
If I understand your example correcty (I am not that good with JavaScript and my RegEx was based rather on the general perl-regex fashion) you could maybe do something like the following:
var patt=new RegExp("<p\s+id='"+id+"'.*?id='end_of_"+id+"'\s*\/>","g");
That way, you don't have to worry about group matching, although I find it to be more elegant, to match the id you wanted via a group instead of inserting it into the RegEx.

Regexp for content inside tags

I use Javascript
I have this:
<(div|span) class="search-result-(body-text|title)">(.*?)</(span|div)>
And i use is on this content:
<div class="search-result-item club">
<span class="search-result-type">Projekt</span
<span class="search-result-title">Titel</span>
<div class="search-result-body-text">
Body text
</div>
<div class="search-result-attributes">
<span class="search-result-attribute">Attribute</span>
</div>
</div>
My result is:
<span class="search-result-title">Titel</span>,
<div class="search-result-body-text">
Body text
</div>
Thats make sense, but how should my regexp look like so it strips the tags, so i only get: Titel, Body text
It is required by law that someone post a link to this: RegEx match open tags except XHTML self-contained tags which you should read and reconsider whether you really want to be parsing HTML using regular expressions.
However, what you want is the contents of the third () group in your match. The exec method of a JS regular expression object is an array containing the whole match at index 0, and the matches from all the groups at indices 1,2,... (in this case index 3 is what you need).
[NOTE: an earlier version of this answer had "first" and "1" instead of "third" and "3" above, because I misread your regexp. Sorry.]

Categories