Selecting and wrapping all occurences of a certain string with jQuery - javascript

In a list of footnote references for an article, I want to select all occurences of "(en)" and wrap them in some so that I can apply bold style to them as well as a right margin.
How to do that with jQuery ?

lets say you can get all your data into a string:
var myString = $('#footnotes').html();
Since you don't need regex you can split into an array and rejoin.. ex:
var newString = myString.split("(en)").join("<span class='en-element'>(en)</span>");
$('#footnotes').html(newString);

Using regex to find the "(en)"'s, and then using string.replace to replace them with the content you want.
I know when to use regex but am not too familiar with it's sintaxys, so sorry for not providing the exact code, take a look at this post in which they tried to do the same but finding and replacing it with \n
jQuery javascript regex Replace <br> with \n

Related

Cant get the correct regex

It drives me crazy to get the correct regex, can any one help, much appreciated.
Source String:
<checklist><checklist class="ng-scope">it can be any content but no more "checklist tag" pair inside</checklist></checklist>
<checklist><checklist class="ng-scope">it can be any content but no more "checklist tag" pair inside</checklist></checklist>
Result string needed :
<checklist></checklist>
<checklist></checklist>
Basically I need to get rid of the content in between pair (no class attribute).
I tried regex something like this
"/[^(.?)[^]*/g" using phone editing , if you can see this correctly , please see the regex I included in the comment
it didn't work, i am fairly new to regex
The following code snippet can repeat multiple times in the source string:
<checklist><checklist class="ng-scope">it can be any content but no more "checklist tag" pair inside</checklist></checklist>
If you insist on a solution with regular expressions, you could do sth. like:
var string = '<checklist><checklist class="ng-scope">it can be any content but no more "checklist tag" pair inside</checklist></checklist>';
var regex = /<checklist\s+[^>]+>.*?<\/checklist>/gi;
// that is, look for a checklist tag with additional attributes
// match everything up to a new closing tag (non-greedy)
// followed by a closing tag
var strippedString = string.replace(regex, '');
alert(strippedString);
See a JS fiddle here and a regex101 demo here.
EDIT: Added /g as #Atri pointed out.
Otherwise, consider using either document.getElementById or some other DOM function.

return substring match

I am trying to get just a part of a string with a regex
this is the string i am testing
class1 container _box _box_CEC493
the string is a series of classes applied to an element.
what i would like to get is just CEC493 which changes since the regex will be applied to a bunch of different elements (therefore string like the one above)
the regex i am using now is
/\s_box_([0-9a-zA-Z]+)/
which returns
_box_CEC493, CEC493
How can i modify it in order to get just the second value (CEC493)?
Thank you
You could probably just split the string:
var str = "class1 container _box _box_CEC493";
var match = str.split('_').pop();
alert(match);
DEMO
The standard way regexes come back is like this:
[0]: Whole result
[1]: First parentheses capture group
etc
So the standard way that people access these is with result[1]. Does that cause any issues in your case?
[updated]
instead of selecting all characters, select until an unwanted character,, and since you are selecting from a number of classes, it is possible that you have the _box_.. class alone without a space before it, so don't use space at the beginning of your regex selector.
str.match(/_box_([^\s]*)/)[1]
jsfiddle

replace similar string in a text using javascript regex

we have a text like:
this is a test :rep more text more more :rep2 another text text qweqweqwe.
or
this is a test :rep:rep2 more text more more :rep2:rep another text text qweqweqwe. (without space)
we should replace :rep with TEXT1 and :rep2 with TEXT2.
problem:
when try to replace using something like:
rgobj = new RegExp(":rep","gi");
txt = txt.replace(rgobj,"TEXT1");
rgobj = new RegExp(":rep2","gi");
txt = txt.replace(rgobj,"TEXT2");
we get TEXT1 in both of them because :rep2 is similar with :rep and :rep proccess sooner.
If you require that :rep always end with a word boundary, make it explicit in the regex:
new RegExp(":rep\\b","gi");
(If you don't require a word boundary, you can't distinguish what is meant by "hello I got :rep24 eggs" -- is that :rep, :rep2, or :rep24?)
EDIT:
Based on the new information that the match strings are provided by the user, the best solution is to sort the match strings by length and perform the replacements in that order. That way the longest strings get replaced first, eliminating the risk that the beginning of a long string will be partially replaced by a shorter substring match included in that long string. Thus, :replongeststr is replaced before :replong which is replaced before :rep .
If your data is always consistent, replace :rep2 before :rep.
Otherwise, you could search for :rep\s, searching for the space after the keyword. Just make sure you replace the space as well.

getElementById replace HTML

<script type="text/javascript">
var haystackText = document.getElementById("navigation").innerHTML;
var matchText = 'Subscribe to RSS';
var replacementText = '<ul><li>Some Other Thing Here</li></ul>';
var replaced = haystackText.replace(matchText, replacementText);
document.getElementById("navigation").innerHTML = replaced;
</script>
I'm attempting to try and replace a string of HTML code to be something else. I cannot edit the code directly, so I'm using Javascript to alter the code.
If I use the above method Matching Text on a regular string, such as just 'Subscribe to RSS', I can replace it fine. However, once I try to replace an HTML string, the code 'fails'.
Also, what if the HTML I wish to replace contains line breaks? How would I search for that?
<ul><li>\n</li></ul>
??
What should I be using or doing instead of this? Or am I just missing a small step? I did search around here, but maybe my keywords for the search weren't optimal to find a result that fit my situation...
Edit: Gonna mention, I'm writing this script in the footer of my page, well after the text I wish to replace, so it's not an issue of the script being written before what I want to overwrite to appear. :)
Currently you are using String.replace(substring, replacement) that will search for an exact match of the substring and replace it with the replacement e.g.
"Hello world".replace("world", "Kojichan") => "Hello Kojichan"
The problem with exact matches is that it doesn't allow anything else but exact matches.
To solve the problem, you'll have to start to use regular expressions. When using regular expression you have to be aware of
special characters such as ?, /, and \ that need to escaped \?, \/, \\
multiline mode /regexp/m
global matching if you want to replace more than one instance of the expression /regexp/g
closures for allowing multiple instances of white space \s+ for [1..n] white-space characters and \s* for [0..n] white-space characters.
To use regular expression instead of substring matching you just need to change String.replace("substring", "replacement") to String.replace(/regexp/, "replacement") e.g.
"Hello world".replace(/world/, "Kojichan") => "Hello Kojichan"
From MDN:
Note: If a <div>, <span>, or <noembed> node has a child text node that
includes the characters (&), (<), or (>), innerHTML returns these
characters as &amp, &lt and &gt respectively. Use element.textContent
to get a correct copy of these text nodes' contents.
So since textContent (or innerText) won't get you the HTML, you'd have to modify your search string appropriately.
You can use Regular Expressions.
Recommend to use Regular Expression. Notice that ? and / are special characters in Regular Expression. And for global multi-line matching, you need g and m flags set in the regular expression.
Regular expression matching of HTML (other than plain text) that comes out of a web page is a bad idea and is troublesome to make work cross browser (particularly in IE). The HTML that comes out of a web page does not always look the same as what was put in because some browser reconstitute the HTML and don't actually store what went in. Attributes can change order, quote marks can change or disappear, entities can change, etc...
If you want to modify whole tags, then you should directly access the DOM and operate on the actual objects in the page.

regular expressions - finding the position of a number and removing brackets around it

I'm stuck. I tried it with regular expressions, but I guess I'm missing something. I'm working with JavaScript.
I have an input like:
(text [number]) the text that follows...
I want an output like:
[number] the text that follows...
I tried it with substr, but my problem is that I do not know the length of the text or number in the brackets. I guess I need the position of the beginning and ending of the number to work with a regEx.
Have you got an idea?
Regexes are the way to go — using JavaScript’s replace function, you don’t need to fiddle with the position of the number in the string.
Try this:
var geoff = '(text 694) the text that follows...';
var geoff_replaced = geoff.replace(/\([^0-9]* ([0-9]*)\)/, '$1');
# geoff_replaced will be "694 the text that follows...
I don’t do much JavaScript regex stuff, so I totally looked up the above on this guide to JavaScript regexes:
http://www.evolt.org/node/36435
It'd help to have a real example but I made one up...
Text:
(Some text 1234) some more text.
Regex:
^.+?(?<Number>\d+)\)(?<Text>.+)$
Replacement:
${Number}${Text}
Full example:
var fixedText = "(Some text 1234) some more text.".replace(/^.+?(?<Number>\d+)\)(?<Text>.+)$/, "${Number}${Text}");
the regex that matches (text [number]) the text that follows... can be like:
"^\(.*?([0-9]*)\)(.*)$"
or you can just match the beginning (and the ending )) and remove it
"^(\(.*?)[0-9]*(\)).*$"

Categories