Remove everything between two known characters - javascript

I'm having the hardest time finding a way to match and remove the text I've been asked to remove.
I can't just match the exact string because it's different every time, but it's always between the same known chars.
<h1 class="art-PostHeader" style="border-bottom:solid 1px; border-bottom-color:#4D909D;">Building Closed</h1>
Code to Remove <form action=
So, while the "Content to be removed" can be anything alpha or numeric, it will always be between </h1> and <form
There should be a way to write a jQuery remove() or replace() function to match it, but I can't figure it out. I've tried regular expressions but I'm not the best at those.

You can reference the nachor tag and get the Next sibling and set the node's value to nothing.
$("h1.art-PostHeader")[0].nextSibling.nodeValue = ""
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 class="art-PostHeader" style="border-bottom:solid 1px; border-bottom-color:#4D909D;">Building Closed</h1> CONTENT TO BE REMOVED<form action="get"></form>

Related

Why am I unable to get the value of this input field using jQuery?

I've been trying to figure out what's wrong with my code for a while now, and why it won't let me get the value of my input field.
My code looks like this:
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<input type=text id="0.1.2_00_1" value=0>
<script>
console.log($('#0.1.2_00_1').val())
</script>
Why doesn't this work? Hopefully I'm not just being really dumb.
If an ID carries a period (special character) in jquery you must escape it like so with double slashes:
console.log($('#0\\.1\\.2_00_1').val());
You need to escape the periods. For example $('#0\\.1\\.2_00_1')
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<input type=text id="0.1.2_00_1" value=0>
<script>
console.log($('#0\\.1\\.2_00_1').val())
</script>
As the jQuery docs on selectors state:
To use any of the meta-characters ( such as
!"#$%&'()*+,./:;<=>?#[\]^{|}~ ) as a literal part of a name, it must
be escaped with with two backslashes: \\.
The id contains the . character which, when passed to a JQuery selector, is interpreted as a CSS class qualifier.
It's causing JQuery to look for an element who's id is 0 that uses a CSS class of 1 and another called 2_00_1.
The official spec. says:
"Using characters except ASCII letters, digits, '_', '-' and '.' may
cause compatibility problems, as they weren't allowed in HTML 4.
Though this restriction has been lifted in HTML 5, an ID should start
with a letter for compatibility."
It's better to avoid them, if possible and use just alpha-numeric values for ids.
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<input type=text id="x" value=0>
<script>console.log($('#x').val())</script>

how to append 4-5 spaces in jquery?

i am trying to append 4-5 apces by the below code but it's not
working. new to Jquery,JS pls help.
$("#<%= lbl100.ClientID %>").text("Your search request is too broad and the first 100 results are displayed.Please refine your search if your result does not show.").append(" ");
Note:- I have also used &nbsp and adding space in the end(not worked) but they are printing as it is and space not coming
Use with html()and make sure that id:- <%= lbl100.ClientID %> is correct and exists.
Example:-
$("#abc").html("Your search request is too broad and the first 100 results are displayed.Please refine your search if your result does not show. ").append(" ");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="abc"></div>
Note:- if you try to select the text then you will see that spaces are also selected.
Another way to do it:-
$("#abc").html("Your search request is too broad and the first 100 results are displayed.Please refine your search if your result does not show. see the space");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="abc"></div>
Note:- Make sure that jQuery library added before your script code otherwise it will not work and you will get $ is undefined error in your browser console.
That's how HTML works: white-space is collapsed into a single space. If you need hard-coded duplicate spaces you need to insert a literal U+00A0 NO-BREAK SPACE character. There're several ways to do it:
Type it as-is (you may also use the clipboard)
Insert a JavaScript entity
Insert an HTML entity
Snippet illustrates #2 and #3 (the editor would convert the character to regular space):
$("div:nth-of-type(1)").text("One\u00A0\u00A0\u00A0\u00A0Two");
$("div:nth-of-type(2)").html("One Two");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div></div>
<div></div>

JavaScript: can I search the regular expression not from the start of string?

I learned that indexOf() could not be used for searching the regular expression in the string, however search() has not the start position and the end position as the optional parameters. How can I find and replace all certain regular expression in the same string? I added the problem where it is no so simple as replace() will be enough.
Problem example
Replace all consecutive two <br/><br/> with </p><p>, if after second <br/> some letters or digits (\w) are following.
Leave all single <br/> of three or more consecutive <br/> such as.
If there are no letter or digits after consecutive two <br/><br/>, leave it such as.
If we use replace() for solving this problem, not only <br/><br/>, but also following symbols will be replaced. To evade it, we need:
Find the start of matching with regular expression. It will be /(?:<br\s*[\/]?>){2}\s*\w+/.
From the start of matching position, find the start position of \w part.
Replace the /(?:<br\s*[\/]?>){2}\s*/ part with </p><p>.
Repeat 1-3 inside the loop from the end of the previous matching position util next matches exists.
As I told above, I don't know how to search the new matching from the certain position. Is there some ways except slice the string and join it again?
var testString = $('#container').html();
console.log(testString.search(/(?:<br\s*[\/]?>){2}\s*\w+/));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<p>
<!-- Only one br: leave such as -->
Brick quiz whangs jumpy veldt fox! <br/>
<!-- Two br and letters then: replace by </p><p> -->
Sphinx of black quartz judge my vow! <br/><br />
<!-- No symbols after 2nd br: leave such as -->
Pack my box with five dozen liquor jugs. <br/><br /><br/>
<!-- Two br and symbols then: replace by </p><p> -->
The vixen jumped quickly on her foe barking with zeal. <br/><br />
<!-- No letters after <br/><br/>: leave such as -->
Brawny gods just flocked up to quiz and vex him.<br/><br />
<p>
</div>
As commented by #epascarello and #torazaburo its NOT recommended to use RegExp for parsing HTML and you should better use HTML parsers to be on safer side.
But if your HTML string that you want to parse is going to use a fixed template / format, you can still use RegExp for parsing it.
Assuming the current RegExp that you have posted returns expected search results for you, you can try following code to replace the string and use </p><p> as required.
var testString = $('#container').html();
console.log(testString.replace(/(?:<br\s*[\/]?>){2}(\s*\w+)/gi, '</p><p>$1'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<p>
Brick quiz whangs jumpy veldt fox! <br/>
Sphinx of black quartz judge my vow! <br/><br />
Pack my box with five dozen liquor jugs. <br/><br /><br/>
The vixen jumped quickly on her foe barking with zeal. <br/><br />
Brawny gods just flocked up to quiz and vex him.<br/><br />
</p>
</div>
Note:
I've kept your RegExp as is assuming it finds the <br> tags as per your requirement, and just added the () around \s*\w+ because we want to remember (keep) that string in the output
I've used gi flags in the RegExp. You can find details here
$1 in replace string will use the remembered string which was matched by \s*\w+

How to capture capitalized input letter which is capitalized by css: text-transform:capitalize

I found the capitalized letter which is capitalized with css text-transform:capitalize was not capitalized when captured by javascript. I wondered what's the easiest way to fix this?
Demo below:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<input id="box" type="text" style="text-transform:capitalize">
<button id="showinput">type in something then press me</button>
</html>
<script>
$("#showinput").click(function(){
txt=$("#box").val();
alert(txt+" as you can see, the first letter of each word is not capitalized!");
})
</script>
The CSS text-transform property only transforms what the user sees on the screen (as with all CSS properties). It does not interact with your JavaScript code. I would suggest applying a similar function to the string in JavaScript, such as _.upperCase from lodash.
As McMath said, CSS text-transform doesn't interact with Javascript. Here is a solution that would give the result you are wanting by capitalizing the first letter in Javascript:
$("#showinput").click(function(){
txt = $("#box").val();
txt = txt.charAt(0).toUpperCase() + txt.slice(1);
alert(txt+" as you can see, the first letter of each word is capitalized!");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<html>
<input id="box" type="text" style="text-transform:capitalize">
<button id="showinput">type in something then press me</button>
</html>
Source: How do I make the first letter of a string uppercase in JavaScript?
Do this in your js using regex
$("#showinput").click(function(){
txt=$("#box").val();
txt = txt.trim().replace(/\b\w{3,}/g, function (l) {
return l.charAt(0).toUpperCase() + l.slice(1);
});
alert(txt+" as you can see, the first letter of each word is not capitalized!");
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<input id="box" type="text" style="text-transform:capitalize">
<button id="showinput">type in something then press me</button>
</html>
Test Cases: Hello World
NOTE This also handle the case when the entered text has space in between, style text-transform:capitalize handles the case of capitalizing each word.
FIDDLE
SCRIPT
$("#showinput").click(function(){
txt=$("#box").val();
var newtxt=txt.split(" ");
var tmp=[];
for(i=0;i<newtxt.length;i++)
{
tmp.push(newtxt[i].trim().charAt(0).toUpperCase()+ newtxt[i].slice(1));
}
//alert(tmp.join(" "));//YOU CAN USE THIS ALSO
alert(tmp.join().replace(","," ")+" as you can see, the first letter of each word is not capitalized!");//YOU CAN USE tmp.join(" ") also
})
DESCRIPTION
What I have tried is,
First get each word in array splitted by a space.
Then converting first letter of each word while trimming any space, then joining it with rest of word and getting it all in an array.
Then joining the array with .join() and then replacing , with a space.
I hope this will help you.
See fiddle for demo, its working as you said.

JavaScript - DOM nodeValue problem

Why the function NodeValue__Two() show null? To me, it should show the same thing as the function NodeValue__One().
I have tested this on IE6.
<html>
<body>
<script language="JavaScript">
function NodeValue__One()
{
alert(myNodeOne.childNodes(0).nodeValue);//This is OK
}
function NodeValue__Two()
{
alert(document.all[6].nodeValue);//This is NOT OK
}
</script>
<p>This PARAGRAPH has two nodes,
<b id="myNodeOne">Node One Text</b>, and
<b id="myNodeTwo">Node Two Text</b>.
<input id="txt1" type="text" value="Damn!!!" />
</p>
<button onclick="NodeValue__One();">Node Value 1</button></br>
<button onclick="NodeValue__Two();">Node Value 2</button>
</body>
</html>
The All array is an array of Elements. Elements do not have a value in the nodeValue.
On the other hand childNodes will contain both Elements and TextNodes.
Its really hard to get the index of All correct since the number of actual elements listed in All can vary from what you are seeing in the HTML. For example dispite there being no HEAD or TITLE Element present in the HTML text, they will be present in the DOM.
Both approaches are deprecated and not safe. It would be better if you gave your elements unique identifiers and used getElementById function to find elements in the DOM:
var element = document.getElementById('id_of_element');
One reason may be that you have erroneously assumed that "This Paragraph has two nodes". It has at least six, including the three text nodes containing "This PARAGRAPH has two nodes,", ", and" and ".".
Use document.all[6].text this will give you Node Two Text

Categories