I need a regex that can match everything else except the random flags..
All flags have this format, starts with FLAG and ends in ;
FLAG:random_token;
Example:
hello
hello world
lorem ipsum dolor sit amet
FLAG:xyz6767abcd45xyz; and lorem
lorem ipsum dolor
FLAG:abc123; and hello there,..
hello there....
output Im trying to obtain:
hello
hello world
lorem ipsum dolor sit amet
and lorem
lorem ipsum dolor
and hello there,..
hello there....
So far I've tried:
^(?!FLAG:(.*?);).*
and
(?!.*\bFLAG:.*$)^.*$
But it fails to extract the strings after the semicolon in FLAG:random_token;
Any help would be appreciated
And I've tried deleting all Flags from the block, but I needed the token values later and Also thought regex would be the best fit.
One way to do this would be to remove the flags from the input string, using String.replace and a regex to match the FLAG: and random token (everything to the next ;), you can then use a callback function to store the tokens as they are found:
str = `hello
hello world
lorem ipsum dolor sit amet
FLAG:xyz6767abcd45xyz; and lorem
lorem ipsum dolor
FLAG:abc123; and hello there,..
hello there....`;
const tokens = [];
str = str.replace(/FLAG:([^;]+);/g, (_, p1) => {
tokens.push(p1);
return '';
});
console.log(str);
console.log(tokens);
Related
I'm trying to replace my footer's text with "Hello World" and I do not want to edit the HTML by adding a class or an id
HTML:
<footer>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
</footer>
JavaScript:
document.getElementById(footer).innerHTML="Hello World";
The problem is that, when I do the code above, nothing is changing
footer is not the id of the element you are selecting, its the tag name.
You can use tag selector for selecting footer.
And to change the div content(i am assuming you want to change the text, keeping div as is), you can select div using the tag selector
and can change the text.
document.getElementsByTagName("footer")[0].getElementsByTagName("div")[0].innerHTML = "Hello World";
Above statement is broken down :
document.getElementsByTagName("footer") //select footer
document.getElementsByTagName("footer")[0] //1st matched element
document.getElementsByTagName("footer")[0].getElementsByTagName("div") // select div
document.getElementsByTagName("footer")[0].getElementsByTagName("div")[0] // first div
document.getElementsByTagName("footer")[0].getElementsByTagName("div")[0].innerHTML = "Hello World"; //change content
document.getElementsByTagName("footer")[0].getElementsByTagName("div")[0].innerHTML = "Hello World";
<footer>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
</footer>
It's because you are selecting id which doesn't exist, try this instead:
document.querySelector('footer').innerHTML = "Hello world";
#edit
document.querySelector('footer').innerHTML = "Hello world";
<footer>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
</footer>
There are a couple of ways by which you can achieve the desired:
1) If you need to change the HTML, you should use the below code for targeting the footer:
document.getElementsByTagName('footer')[0].innerHTML = '<div>Hello World</div>';
document.getElementsByTagName('footer')[0].innerHTML = '<div>Hello World</div>';
<footer>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
</footer>
2) If you wish to just modify the text, without changing the HTML, you can also make use of the following:
document.getElementsByTagName('footer')[0].innerText = 'Hello World';
document.getElementsByTagName('footer')[0].innerText = 'Hello World';
<footer>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
</footer>
The difference between the two approaches is that the former keeps the text inside the div while the latter keeps inside footer tag itself.
If you look through inspection in the two, it will have an output like the below:
1)
<footer>
<div>
Hello World
</div>
</footer>
2)
<footer>
Hello World
</footer>
With this regular expression :
/lorem(?=[\s,;\[\]\(\)]*ipsum)/ig
It matches "lorem" that is followed by "ipsum" with/without " ,;][)(" characters.
Example text: Lorem ipsum dolor sit amet, Lorem; ipsum dolor sit amet, Lorem,; (ipsum) dolor sit amet, Lorem dolor sit amet, Lorem amet.
if I use ?: instead of ?= it matches whole text from "lorem" to end of "ipsum" such as "Lorem ipsum", "Lorem; ipsum", "Lorem,; (ipsum" , etc... .
Now I want to Regex match both "lorem" and "ipsum" without matching " ,;][)(" characters. How I modify the expression to do this?
/lorem(?=[\s,;\[\]\(\)]*(ipsum))/gmi
demo here
How do I select with Regular Expression the text after the </h2> closing tag until the next <h2> opening tag
<h2>my title here</h2>
Lorem ipsum dolor sit amet <b>with more tags</b>
<h2>my title here</h2>
consectetur adipisicing elit quod tempora
In this case I want to select this text: Lorem ipsum dolor sit amet <b>with more tags</b>
Try this: /<\/h2>(.*?)</g
This finds a closing tag, then captures anything before a new opening tag.
in JS, you'd do this to get just the text:
substr = str.match(/<\/h2>(.*?)<h2/)[1];
Regex101
var str = '<h2>my title here</h2>Lorem ipsum <b>dolor</b> sit amet<h2>my title here</h2>consectetur adipisicing elit quod tempora';
var substr = str.match(/<\/h2>(.*?)<h2/)[1].replace(/<.*?>/g, '');
console.log(substr);
//returns: Lorem ipsum dolor sit amet
Try
/<\/h2>((?:\s|.)*)<h2/
And you can see it in action on this regex tester.
You can see it in this example below too.
(function() {
"use strict";
var inString, regEx, res, outEl;
outEl = document.getElementById("output");
inString = "<h2>my title here</h2>\n" +
"Lorem ipsum dolor sit amet <b>with more tags</b>\n" +
"<h2> my title here </h2>\n" +
"consectetur adipisicing elit quod tempora"
regEx = /<\/h2>((?:\s|.)*)<h2/
res = regEx.exec(inString);
console.log(res);
res.slice(1).forEach(function(match) {
var newEl = document.createElement("pre");
newEl.innerHTML = match.replace(/</g, "<").replace(/>/g, ">");
outEl.appendChild(newEl);
});
}());
<main>
<div id="output"></div>
</main>
I added \n to your example to simulate new lines. No idea why you aren't just selecting the <h2> with a querySelector() and getting the text that way.
Match the tags and remove them, by using string replace() function. Also this proposed solution removes any single closure tags like <br/>,<hr/> etc
var htmlToParse = document.getElementsByClassName('input')[0].innerHTML;
var htmlToParse = htmlToParse.replace(/[\r\n]+/g,""); // clean up the multiLine HTML string into singleline
var selectedRangeString = htmlToParse.match(/(<h2>.+<h2>)/g); //match the string between the h2 tags
var parsedString = selectedRangeString[0].replace(/((<\w+>(.*?)<\/\w+>)|<.*?>)/g, ""); //removes all the tags and string within it, Also single tags like <br/> <hr/> are also removed
document.getElementsByClassName('output')[0].innerHTML += parsedString;
<div class='input'>
<i>Input</i>
<h2>my title here</h2>
Lorem ipsum dolor sit amet <br/> <b>with more tags</b>
<hr/>
<h2>my title here</h2>
consectetur adipisicing elit quod tempora
</div>
<hr/>
<div class='output'>
<i>Output</i>
<br/>
</div>
Couple of things to remember in the code.
htmlToParse.match(/(<h2>.+<h2>)/g); returns an array of string, ie all the strings that was matched from this regex.
selectedRangeString[0] I am just using the first match for demo purspose. If you want to play with all the strings then you can just for loop it with the same logic.
I have some HTML that comes back from another process looking like this:
Lorem <i style="color:blue;">
<strong>ipsum</strong>
</i>
<i style="color:blue;">
<strong> </strong></i>
<i style="color:blue;">
<strong>test</strong>
</i> dolor sit amet
Note that basically every element (where a word, group of punctuation, or group of whitespace constitutes an "element") has its own set of identical tags wrapped around it. I am trying to find a way in Javascript to simplify it back to this:
Lorem <i style='color:blue;'>
<strong>ipsum test</strong></i>
dolor sit amet
It seems at once both simple and complex. My brain is fried from a full day of power-coding, so I'm not coming up with any creative solutions.
Superthanks!
How about
DEMO
var str = 'Lorem <i style="color:blue;"><strong>ipsum</strong></i><i style="color:blue;"><strong> </strong></i><i style="color:blue;"><strong>test</strong></i> dolor sit amet'
var d = document.createElement('div');
d.innerHTML= str;
var italics = d.getElementsByTagName('i');
var text = str.substring(0,str.indexOf('<i'))
text += '<i style="color:blue;"><strong>';
for (var i=0;i<italics.length;i++) {
text += italics[i].textContent;
}
text += '</strong></i>';
text += str.substring(str.lastIndexOf('>')+1);
console.log(text)
document.getElementById('content').innerHTML=text;
// You have to be really sure of the source:
// (the lines in the string are broken for posting)
var s= 'Lorem <i style="color:blue;"><strong>ipsum</strong></i>'+
'<i style="color:blue;"><strong> </strong></i><i style="color:blue;">'+
'<strong>test</strong></i> dolor sit amet';
s= s.replace(/<\/strong>\s*<\/i>\s*<i[^>]+>\s*<strong>/g, '');
// returned value: (String)
Lorem <i style="color:blue;"><strong>ipsum test</strong></i> dolor sit amet
html:
Lorem ipsum test dolor sit amet
I am looking for a way to separately process the lines in a <div> that are wrapped due to a narrow width. That is, if my text is "Lorem ipsum dolor sit amet lorem \n ipsum dolor sit amet" and it is seen as below:
Lorem ipsum dolor
sit amet lorem
ipsum dolor sit
amet
Then I should be able to encapsulate each 'line' in a, say, <span> tag, such as:
<span id="line0">Lorem ipsum dolor<span>
<span id="line1">sit amet lorem</span>
... etc.
Edit: We can assume that the width and height of the div is fixed and known.
I couldn't find a proposed solution, if any exists; although there is a good suggestion for counting the lines for a fixed line-height: How to check for # of lines using jQuery
Starting with this:
<div class="narrow">Lorem ipsum dolor sit amet lorem ipsum dolor sit amet</div>
css:
.narrow {
width:60px;
}
Insert some placeholders where there are spaces:
$('.narrow').html($('.narrow').html().replace(/ /g,"<span class='count'> </span>"))
Determine the y-position of each placeholder:
$('.narrow .count') .each(function() {
var myPos = $(this).position()
alert(myPos.top)
})
From there you should be able to figure out where the start/end points of each line based on its y-position.