Concatenating strings in JavaScript / jQuery? - javascript

I need to remove nested <b></b> tags. See the generated css and you'll understand the problem:
<div class="highlight" contenteditable="true">
ahuasdhuasdhuasdhu
<b>
<b>#</b>
huadshuashud
</b>
</div>
I want remove the tags that have a '# inside, but I don't want remove the '#'. (Note the hashtag can be any another value). For this, I wrote the following code:
// Highlight already been declared and just is a simple $('.highlight').
highlight.children('b').children('b').contents().unwrap();
Now I have the following code:
<div class="highlight" contenteditable="true">
ahuasdhuasdhuasdhu
<b>
"#"
"huadshuashud"
</b>
</div>
I want join this two strings, because when I double click it, it just select "#" or "huadshuashud", but I want that all content inside the tag is selected.
Have some way to improve my method or concatenate these two strings?

Try:
$('.highlight > b').html(function(){
return $(this).text();
});
Which will give you this:
<b>
#
huadshuashud
</b>

Selecting text in an element (akin to highlighting with your mouse)
Here you have a ready function. Edit the beginning to be able to pass an object instead of id and add a handler:
$(".highlight").ondblclick(function(){
SelectText(this)
})
function SelectText(elementObject) {
// here choose function you like and replace text variable
text = elementObject;
...

Related

Change href in div to normal text

I have one problem. On my website, I have <div id="alpha_bravo">, with links inside. It looks like this:
<div id="alpha_bravo">
<p>text text text link</p>
</div>
I want change every <a href...> to funny text like suprise, as an example.
How can I do it?
Since you tagged the question with PHP and from the comments below the question it seems that you may want to use server-side functionality, I'm going to give an example using PHP.
One way is to replace only links. You are looking for preg_replace() function that will replace all substrings in the string based on a regex pattern.
$input = "<div id='alpha_bravo'><p>text text text <a href='...'>link</a> and <a href='...'>another link</a></p></div>";
$output = preg_replace("/<a (.*?)>(.*?)<\/a>/i", "surprise", $input);
You can also just remove all HTML tags in the string using strip_tags() function.
$input = "<div id='alpha_bravo'><p>text text text <a href='...'>link</a> and <a href='...'>another link</a></p></div>";
$output = strip_tags($input);
Given that this is coming from a database, first word of advice is that you filter your input before saving it in database.
Secondly, if you don't want those links to render and replace them with some other value then use PHP's function preg_replace() as already mentioned by PetrHejda..
PHP docs: http://php.net/manual/en/function.preg-replace.php
Your <a ...>...</a> pattern may differ if users insert styling and classes.
Try using this pattern as your solution: preg_replace("/<a(.+?)href=\"(.+?)\"/", "<a$1href=\"your_value_here\"", $yourStringHere);
You may use g or i flags. Start here with regular expressions: http://www.regular-expressions.info/.

Setting regular expression to test input text which contain HTML markup

I am trying to create a pattern to prevent user inputs from HTML mark up. I created this patten
var htmlTagRegex = /^<+[a-z]+>/;
which only works when the input starts with html tag for example:
<br /> Test
<p> Test
<div> Test
but in case of having an input like below
Test <br />
Test <p>
Test <div>
the pattern not working (probably because of /^). How can I write the pattern to consider any html tag contains?
^(?=.*(?:<[^>]+>)).*$
You can use this to detect html markers.See demo.
http://regex101.com/r/lZ5mN8/43
now my question is can you please let me know how to power the pattern to consider any html tag contains?
<\w+\b[^<>]*>
For matching custom tags,
<[^<>]+>
To match the whole line which contains the tag. You don't need to go for lookaround assertions.
^.*?<[^<>]+>.*$
DEMO
Just for your information
In jQuery, If you want extract text alone without html markup , then you can use pattern like this
$("<div/>").html("#elementId").text()

regex for getting html starting tags

I want get only the starting html tags. Lets say I have html like this
<div class="some">Here is a sample text<br /><p>A paragraph here</p></div>
<ul><li>List Item</li></ul>
From the above html I want to extract this information
<div
<br
<p
<ul
<li
see I dont need ending '>' of tags
Try regex /<[a-zA-Z]+[1-6]?/g. I added the [1-6] for the header HTML tags - I think they're the only ones with numbers. If you wanted to be sure you could do /<[a-zA-Z0-9]+/g, since in HTML a < is always a tag (unless it's a comment <--), because in-line < get converted to <.
The following returns you an array of the matches with what you want from the html body.
'<div class="some">Here is a sample text<br /><p>A paragraph here</p></div><ul><li>List Item</li></ul>'.match(/<\w+/g)
How about this:
String input = "<div class=\"some\">Here is a sample text<br /><p>A paragraph here</p></div><ul><li>List Item</li></ul><6>";
Scanner scanner = new Scanner(input);
String result = "";
while( (result = scanner.findInLine("<\\w+")) !=null ){
System.out.println(result);
}

remove or hide text using jquery?

I need to hide some text (Add £0.20) which is within a td. I have a parent DIV class at the top. Here is the cut down HTML:
<div id="KitFormOptions">
<td valign="top" align="left">Text Personalisation, Add £0.20<br><br><textarea value="" name="KitGroupID_98_TextOption_796" rows="5" style="width:100%"></textarea></td>
</div>
the css path looks like this:
html body div#container div#body-container div#content-area div#content-text div#kitProduct div#KitFormOptions form table tbody tr.LightCell td
You can dynamically wrap price with span using replace with regular expression:
$("#KitFormOptions td").each(function(){
$(this).html(
$(this).html().replace(/(Add £\d*\.\d{2})/,"<span class='price'>$1</span>")
)
})
And hide them
$('span.price').hide()
This replace any decimal format consisting zero of more decimal numbers before dot and exactly two numbers after dot.
Therefore it will be replaced any price which will be on site.
You can do the following but its not a good idea. Better is to create a span around £0.20 and hide this. But you say you cant do this.
$("#KitFormOptions").html($("#KitFormOptions").html().replace("£0.20",""))
Why hide it? Can't you just delete it? Otherwise you'll need to add a <span> around it or something similar so you can reference it.
Where is the HTML coming from and why is the price even there then?
The best solution can looks like: push your ", add 20" to span and set class="hide" for the span tag.
A div element should not contain a lonely td but try this snippet, it replaces the text in all tdelements within your div #KitFormOptions:
$('#KitFormOptions td').text('Text Personalisation');
Wrap it in some element like <span> give it a class, and hide that element.
Example:
<div id="KitFormOptions">
<td valign="top" align="left">Text Personalisation, <span class="price">Add £0.20</span><br><br><textarea value="" name="KitGroupID_98_TextOption_796" rows="5" style="width:100%"></textarea></td>
</div>
jQuery:
$('span.price').hide()

Set ASP Literal text with Javascript

I have an asp:Literal on my page (which cannot be converted to a Label or any other control) that I need to change the text of via JavaScript. I have the following code that works for a Label. Can anybody help?
<script type="text/javascript">
function changeText() {
document.getElementById('<%= Test.ClientID %>').innerHTML = 'New Text';
}
</script>
<a href="#" onclick='changeText()'>Change Text</a>
<asp:Label id="Test" runat="server" Text="Original Text" />
Thanks
UPDATE:
I cannot change from a literal as the code behind writes HTML/CSS to it for an Information Message e.g:
LITMessage.Text = "<div class='success'>Information Successfully Updated</div>"
<asp:Literal> controls don't create their own HTML tag.
Therefore, there is no element that you can manipulate.
Instead, you can wrap the <asp:Literal> in a <div> tag with an ID.
An ASP.NET Literal doesn't add any markup to the page. Therefore you have to wrap your content in some container so that you can edit it via JavaScript:
Assuming you had the following Literal on the page:
<asp:Literal runat="server" Id="literalControl" />
And were setting the text via code behind (because if you're not, you could just create the span/div in the markup to begin with and not have this issue):
literalControl.Text = "Some text you want to change";
The code behind becomes:
literalControl.Text = "<span id='myId'>Some text you want to change</span>";
And the JavaScript would be:
document.getElementById('myId').innerHTML = 'New Text';
Does the literal contain html markup?
if not, you could wrap the literal control in a div and give it an id. Then use js to replace the text within that div.
in response to your update:
In that case, since you are rendering a div with a class of success, I would use jQuery to update the html in that div...it would be as simple as:
$('.success').html('new html goes here');
Wrap the <asp:literal> control in a <div> and then use jQuery if needed to clear the contents like shown below:
<div id="divMyText">
<asp:Literal ID="MyText" runat="server"></asp:Literal>
</div>
Here is how to clear the text using jQuery:
//Clear the html inside of the div
$("#divMyText").html("");
A Literal is a direct render of text to the page. The only HTML it will render will be the HTML markup you include in the text string you set to the Literal. Instead of using a Literal surrounded by a div (unless you specifically want that functionality) you can use an ASP Label and perform operations on it.

Categories

Resources